Material-UI: the Select component doesn't accept a Fragment as a child. Consider providing an array instead

Question

我正在使用材料 ui，我遇到了下一个问题：index.js:1 Material-UI：Select 组件不接受 Fragment 作为子项。考虑提供一个数组。

我的代码是下一个：

import { Container, Grid, Select, MenuItem } from '@material-ui/core';
import React, { Component } from 'react';
import Store from '../component/store/store'

class StoreBuilder extends Component {

   constructor(props) {
    super(props);
       this.state = {
        DivisionState: 'Store 1',
        DivisionData: [
            {
                id: 1,
                divDeptShrtDesc: 'Store 1'
            },
            {
                id: 2,
                divDeptShrtDesc: 'Store 2'
            },
            {
                id: 3,
                divDeptShrtDesc: 'Store 3'
            }
        ]
    }
    this.renderDivisionOptions = this.renderDivisionOptions.bind(this);
    }


    handleChangeDivision(event) {
        this.setState({ DivisionState: event.target.value });
    }

    renderDivisionOptions() {
        return this.state.DivisionData.map((dt, i) => {
            return (
                <MenuItem
                    key={i}
                    value={dt.divDeptShrtDesc}>
                    {dt.divDeptShrtDesc}
                </MenuItem>
            );
        });
    }

    render() {     
        return (
            <div>
                <Container >
                    <Grid >
                    <Store stores={this.state.DivisionState} 
                            onChange={this.handleChangeDivision}
                            render ={this.renderDivisionOptions}>

                    </Store>
                    </Grid>
                </Container>
            </div>
        );
    }
}
export default StoreBuilder;

钩子的代码如下：

import { Container, Grid, Select, MenuItem } from '@material-ui/core';
import React, { Component } from 'react';


const store = (props) => {

    return (

        <div>
            <Container >
                <Grid >
                    <Select value={props.DivisionState}
                        onChange={props.handleChangeDivision}
                    >
                        <>{props.render()}</>
                    </Select>
                </Grid>
            </Container>
        </div>
    );

}
export default store;

有任何想法吗？使用 select from material ui 的正确方法是什么？谢谢。

Answer 1

在您<Select>使用的中<></>，它实际上是一个片段（并返回一个对象）。

尝试{props.render()}不使用片段。