失败的道具类型:提供给"ForwardRef(Select)"的无效道具"子项"

Question

嗨，我在反应项目中遇到了一些问题，我正在使用钩子，并且作为道具传递给钩子的方法遇到了问题。我也在使用 materail u，这是我的代码：

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>
);
});
}