Question

在此组件的其他子级中调用回调时，我需要将新的道具传递给子级。这是带有setState()的示例，该示例无法正常工作。我该怎么做？即从onChange到isExpanded的布尔值。

export default class Item extends React.Component {

constructor(props) {
    super(props);

    this.state = {
        isExpanded: false,
    };

    this.handleChange = this.handleChange.bind(this);
}

render() {
    const {
        id,
        title,
    } = this.props;

    return (
        <ExpansionPanel onChange={this.handleChange}>
            <ExpansionPanelSummary expandIcon={<ExpandMoreIcon />}>
                <Typography>{title}</Typography>
            </ExpansionPanelSummary>

            <ExpansionPanelDetails>
                <Program isExpanded={this.state.isExpanded} id={id}/>
            </ExpansionPanelDetails>
        </ExpansionPanel>
    )
}

handleChange = (event, expanded) => {
    this.setState({isExpanded: expanded});
}

}

我将其展开，程序收到错误：console log

我将其关闭，程序收到了正确的消息：console log

Answer 1

onChange不提供expanded参数，也不需要它，因为应该使用state updater function设置派生状态，并且当前的isExpanded值可用： / p>

handleChange = (event) => {
    this.setState(state => ({isExpanded: !state.isExpanded}));
}

Answer 2

问题在Program组件中，该组件使用componentWillReceiveProps。我刚刚使用了newProps，它工作正常。 componentWillReceiveProps的{{1}}工作在这里：

Program

React组件回调后如何传递新道具？

2 个答案: