失败的道具类型：提供给`ForwardRef（Select）`的无效道具`children`，需要一个ReactNode

Question

您好，我在使用 react 项目时遇到了一些问题，我正在使用钩子，但我遇到了作为道具传递给钩子的方法的问题。我也在使用 materail ui，这是我的代码：

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

class StoreBuilder extends Component {
    state = {
        DivisionState: 'Store 1',
        DivisionData: [
            {
                id: 1,
                divDeptShrtDesc: 'Store 1'
            },
            {
                id: 2,
                divDeptShrtDesc: 'Store 2'
            },
            {
                id: 3,
                divDeptShrtDesc: 'Store 3'
            }
        ]
    };
    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;

问题出在下一个代码中，我不太确定是否可以执行下一个代码，我正在尝试将 renderDivisionOptions 方法作为参数传递，以便在带有 props 的钩子中使用：

 {() =>props.render()}

Answer 1

您正在将函数{() =>props.render()} 传递给<Select>，但您似乎需要调用该函数：

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

此外，如果Select 元素需要一个 ReactNode，您可能需要用片段包装它：

<>{props.render()}</>

由于您将 renderDivisionOptions 作为回调传递给另一个组件，它会丢失其上下文 (this)。需要将其转换为箭头函数，或者在构造函数中绑定。

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