reactjs - 从 React-Native 选择器渲染选择器项目以填充下拉菜单选择

Question

我成功地使用react-native选择器在我的一个组件中呈现下拉菜单。现在，在选择器代码中，我正在对用于填充下拉菜单项的值进行硬编码。我最理想的做法是将这些作为道具传递，并让它们在picker. 不过，我不确定该怎么做。我尝试使用 for 循环，但我无法在组件代码本身中运行那种条件逻辑。这就是硬编码值的样子。

export const DropDownMenu = (props) => {
  const [selectedValue, setSelectedValue] = useState(null);
  return (
    <View style={styles.container}>
      <Picker
        selectedValue={selectedValue}
        style={{ height: 50, width: 150 }}
        onValueChange={(itemValue, itemIndex) => {
          props.onSelectMenuValue(itemValue), 
          setSelectedValue(itemValue)
        }}
      >
        <Picker.Item label="A" value="a" />
        <Picker.Item label="B" value="b" />
        <Picker.Item label="C" value="c" />
      </Picker>
    </View>
  );
}

如何Picker.Item根据传入的道具渲染值？

Answer 1

您可以将optionsprop 作为具有 alabel和 avalue属性的对象数组传递，并map像这样使用：

<Picker /*whatever you need for picker here*/>
{props.options.map(option => <Picker.Item label={option.label} value={option.value}/>)}
</Picker>