如何将 json 文件中的元素设置为 React 组件

Posted 2023-02-22

【中文标题】如何将 json 文件中的元素设置为 React 组件

【英文标题】：How to set elements from a json file into a React component

【发布时间】：2022-01-10 01:04:42

【问题描述】：

我尝试使用 react 为我的网站创建一个选择组件，当您编写它时它工作正常，但是当使用 json 文件中的数据时，您可以看到所有选择，但是当您单击一个时，它不是选择。 你可以在下面找到我的代码：

function BasicSelect(props) 
    let AllItems = () => props.category.items.map((item) => <MenuItem value=item>item</MenuItem>)

    const [item, setItem] = React.useState('');

    const handleChange = (event) => 
        setItem(event.target.value);
    ;

    return (
        <Box sx= minWidth: 130 >
            <FormControl fullWidth>
                <InputLabel id="demo-simple-select-label">props.category.name</InputLabel>
                <Select
                    labelId="demo-simple-select-label"
                    id="demo-simple-select"
                    value=item
                    label="Item"
                    onChange=handleChange
                    onClick=handleChange
                >
                <AllItems/>
                </Select>
            </FormControl>
        </Box>
    );

这是我的 JSON 文件：

    "name" : "background",
    "items" : ["red", "orange", "yellow" , "green" , "cyan" ,"blue" , "avax" , "beach", "winter" , "summer" , "desert", "forest"]

【问题讨论】：

你从哪里得到 元素？一个库，还是自定义的？

【参考方案1】：

我们以错误的方式使用AllItems。 在这种情况下，AllItems 本身就是一个组件，所以当用户点击呈现在AllItems 组件内部的MenuItem 时，Select 组件不会收到Change 事件。

解决这个问题的方法是使AllItems 成为一个函数，而不是一个组件。 考虑下面的 sn-p。

  const renderAllItems = () =>
    props.category.items.map((item, index) => (
      <MenuItem value=item key=`$props.category-$index`>
        item
      </MenuItem>
    ));

...

        <Select
          labelId="demo-simple-select-label"
          id="demo-simple-select"
          value=item
          label="Item"
          onChange=handleChange
        >
          renderAllItems()
        </Select>

在这里您可以找到完整的工作示例。 https://codesandbox.io/s/gallant-shockley-lwhl8?file=/src/App.js

【讨论】：

是的，现在可以了，谢谢！！