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"}]

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

您可以将此文件保存在单独的文件中，导出阵列并导入要使用的位置。
您可以直接在要使用它的组件中维护它。
您可以保持状态。

您可以这样迭代

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

注意：如果您选择保持状态，则需要使用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

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

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

1 个答案: