使用 Material UI 在 React.js 中使用单个道具发送多个组件

Question

有什么方法可以使用 Material UI 在一个道具中发送多个<MenuItem>？

Form.js

export default function MyForm = (props) => {

<FormControl
        <Select value={ItemValue} >
          items={props.items}
        </Select>
</FormControl>

}

我尝试以不同的方式输出道具。在<MenuItem> 之间设置逗号只会呈现最后一个<MenuItem>。用<React.Fragment> 包裹它确实有效，但是MenuItem value 不会从value={ItemValue} 得到纠察

{ItemValue} 这里只是一个在事件处理中获取MenuItem value 的函数。

App.js

<MyForm
    items={
           <MenuItem value={1}>value 1</MenuItem>
           <MenuItem value={2}>value 2</MenuItem>
           <MenuItem value={3}>value 3</MenuItem>
           <MenuItem value={4}>value 4</MenuItem>
          }
/>

有什么合适的配置方法吗？

Answer 1

最简单的解决方法是将值作为道具传递到 MyForm 作为值数组，这是一个说明性示例： App.js

export default function App() {
const myItemsValues = [1, 2, 3, 4];
return (
    <div>
        <MyForm items={myItemsValues} />
    </div>
);}

MyForm.js

export default function MyForm({ items }) {
return (
    <div>
        <FormControl>
            <Select value={1}>
                {items.map((value) => {
                    return <MenuItem value={value}>{value}</MenuItem>;
                })}
            </Select>
        </FormControl>
    </div>
);}

如果你坚持将它们作为一个集合传递：

export default function App() {
const myItemsValues = [1, 2, 3, 4];
const myItemsComponents = myItemsValues.map((value) => {
    return <MenuItem value={value}>{value}</MenuItem>;
});
return (
    <div>
        <MyForm items={myItemsComponents} />
    </div>
);}
export default function MyForm({ items }) {
return (
    <div>
        <FormControl>
            <Select value={1}>{items}</Select>
        </FormControl>
    </div>
);}

基本上是一样的，都会产生同样的结果。