如何為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>
   })
}

注意：如果選擇保持狀態，則需要使用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

現在您可以像上面顯示的那樣進行迭代。