如何为 100 个菜单项创建一个下拉菜单？

Question

我在使用Material-UI 创建的 React JS 前端中有以下代码。它会创建一个下拉菜单字段。

菜单项是硬编​​码的。如果项目数量很少，这可以正常工作。如果我有 100 件商品怎么办？当然，我可以像下面在我的示例中所做的那样列出所有 100 项。但是，这种方法是一种丑陋的解决方法。有什么正确的方法吗？例如，我可以从 CSV 文件或单独的常量类中读取菜单项吗？

<Grid item xs={true}>
     <FormControl
         className={this.props.styles.formControl}
         margin="normal">
         <InputLabel shrink htmlFor="origin-label-placeholder">
            Origin
         </InputLabel>
         <Select
             onChange={(event) => this.props.handleChange("origin", event)}
             value={this.props.state.origin}
             input={<Input name="origin" id="origin-label-placeholder" />}
             displayEmpty
             name="origin">
                        <MenuItem value={"A"}>A-option</MenuItem>
                        <MenuItem value={"B"}>B-option<</MenuItem>
                        <MenuItem value={"C"}>C-option<</MenuItem>
                        <MenuItem value={"D"}>D-option<</MenuItem>
                        <MenuItem value={"E"}>E-option<</MenuItem>
                        <MenuItem value={"F"}>F-option<</MenuItem>
                        <MenuItem value={"G"}>G-option<</MenuItem>
                        <MenuItem value={"A2"}>A2-option<</MenuItem>
                        <MenuItem value={"B2"}>B2-option<</MenuItem>
                        <MenuItem value={"C2"}>C2-option<</MenuItem>
                        <MenuItem value={"D2"}>D2-option<</MenuItem>
         </Select>
    </FormControl>
</Grid>

Answer 1

您可以创建一个选项数组并对其进行迭代，

const options = [{label:"A-option",value:"A"},{label:"B-option",value:"B"},{label:"C-option",value:"C"},{label:"D-option",value:"D"}]

你有以下地方可以写这个，

1. 您可以将其保存在单独的文件中，导出数组并导入您要使用的位置。

2. 您可以直接在要使用它的组件中维护它。

3. 可以保持在状态。

你可以这样迭代，

{options && options.length && options.map(option => {
      return <MenuItem value={option.value}>{option.label}</MenuItem>
   })
}

注意：如果选择保持in状态，需要使用this.state.options。

---

更新

在单独的文件中维护数组并导出相同的文件。比如Constants.js文件

export const options = [{label:"A-option",value:"A"},{label:"B-option",value:"B"},{label:"C-option",value:"C"},{label:"D-option",value:"D"}]

然后你需要在你的组件中导入这个，

import {options} from './Constant';  //Notice the curly braces due to named export

现在您可以像上面显示的那样进行迭代。