小编Har*_*rel的帖子

我在我的项目中使用react-select。

我有很多选择，并且需要打开这些选择，因此我使用道具 menuIsOpen={true} 但由于某种原因，该道具导致页面向下滚动到几乎页面中间。

当我设置 menuIsOpen={false} 时，页面不会向下滚动，但它不能解决问题，因为我必须打开选择

有人熟悉这个问题吗？

      <Select
        styles={filter.name !== "More" ? basicStyles : moreStyles}
        isMulti={filter.name !== "colorType" ? true : false}
        options={options}
        hideSelectedOptions={false}
        closeMenuOnSelect={false}
        placeholder=""
        value={selectedValues ? selectedValues : []}
        isClearable={false}
        isSearchable={false}
        onChange={addSelectFilter}
        components={{ MultiValueLabel: customMultiValueLabel }}
        blurInputOnSelect={false}
        classNamePrefix={filter.name === "More" ? "more" : "basic-drop"}
        className={filter.name === "More" ? "more-select-container" : undefined}
        menuIsOpen={
          filter.name === "More" ? undefined : menuIsOpen ? true : undefined
        }
      />

我有一个看起来像这样的倒计时组件

import styles from "./Countdown.module.scss";
import React from "react";
import useTimer from "hooks/useTimer";
import cn from "classnames";

function Countdown({ date,className="" }) {
  const { days, hours, minutes, seconds } = useTimer(date);
  return (
    <div className={cn(styles.countdown,className)}>
      <div className={styles.box}>
        <p className={styles.number}>{days}</p>
        <p className={styles.type}>Days</p>
      </div>
      <div className={styles.seperator}>:</div>
      <div className={styles.box}>
        <p className={styles.number}>{hours}</p>
        <p className={styles.type}>Hours</p>
      </div>
      <div className={styles.seperator}>:</div>
      <div className={styles.box}>
        <p className={styles.number}>{minutes}</p>
        <p className={styles.type}>Minutes</p>
      </div>
    </div>
  );
}

export default Countdown;

我有看起来像这样的主页

import styles from "../styles/Home.module.scss";
import Countdown from "components/ui/Countdown";
export default function Home() { …

我正在尝试在 React Native 中创建一个基本的下拉列表。

我创建了一个下拉组件：

//Dropdown
import React, { useState } from "react";
import {
  StyleSheet,
  Text,
  View,
  TouchableOpacity,
  Platform,
} from "react-native";
import { Feather } from "@expo/vector-icons";
import Responsive from "../responsive";
export default function DropDown({ options }) {
  const [isOpen, setIsOpen] = useState(false);

  const toggleDropdown = () => {
    setIsOpen((prev) => !prev);
  };

  return (
    <TouchableOpacity onPress={toggleDropdown} style={styles.dropdownBox}>
      <Text style={styles.selectedText}>Round</Text>
      <Feather name="chevron-down" size={24} />
      {isOpen && (
        <View style={styles.menu}>
          {options.map((item) => (
            <Text style={styles.option} key={item}>
              {item}
            </Text>
          ))} …

我的 React 应用程序有问题，我不知道如何解决；

我有一个包含值和所选列表的数组以及一个将项目添加到所选列表的函数

import React, { useState } from "react";
import Parent from "./Parent";
export default function App() {
  const [chosenList, setChosenList] = useState([]);
  const array = ["dsadas", "dasdas", "dasdasd"];

  const addToChosenList = string => {
    setChosenList([...chosenList, string]);
  };

  return (
    <div className="App">
      <Parent
        arr={array}
        chosenList={chosenList}
        addToChosenList={addToChosenList}
      />
    </div>
  );
}

通过数组映射并为嵌套组件提供道具的父组件：item、addToChosenList、inList

import React from "react";
import Nested from "./Nested.js";

export default function Parent({ arr, addToChosenList, chosenList }) {
  return (
    <div className="App">
      {arr.map((item, index) => (
        <Nested
          key={index} …