Question

我是React的新手，我想将父道具分配给子组件的变量，例如=>

this.setState({
   tsmodel : props.dataSource
})

这是父代码=>

<TimeSheetDialog 
          fromdate={this.state.fromdate}
          todsate={this.state.todate}         
          show={this.state.showmodel}
          onHide={this.handleModelShow}
          dataSource={this.state.selectedtsrow}/>

我将此selectedtsrow变量传递给子组件。

这是我的孩子代码=>

export default class TimeSheetDialog extends React.Component{

    constructor(props){
        super(props);

        this.state = {
           tsmodel : props.dataSource
        };    
    }

 render(){
   return(
   .
   .
   .



     <DatePicker
         selected={ this.state.tsmodel.tsdate }
         onChange={(e)=>this.handleDateChange("tsdate",e)}
         dateFormat="dd-MM-yyyy"
         />

)

}
}

我不能这样使用，因为此tsmodel始终为undefined。

我的要求是我不想使用this.props.dataSource.tsdate，而我想使用this.state.tsmodel.tsdate。

如何将此父项props设置为child变量？我想念逻辑吗？

Answer 1

以我的经验，执行此操作的最佳方法是将绑定到父级的函数传递给子级，这会更改父级中必需的功能。所以

parent {
    setValue = (value) => {
         this.parentValue = value;
    }

    render() {
         return(<child setParentValue={this.setValue}>);
    }
}

child() {
    someFunction = () => {
        this.props.setParentValue("value");
    }
}

关于更改道具，只有父母（祖父母）的父母可以更改提供给父母的道具，所以也许基本上从功能上讲是最好的吗？

Answer 2

这是因为我的子变量没有刷新。所以我使用了componentWillReceiveProps方法，例如=>

componentWillReceiveProps(nextProps) {
   this.setState({
      tsmodel : this.props.dataSource
})
}

现在tsmodel已更新。

如果您不想使用componentWillReceiveProps，请在子项like =>中使用key属性

<TimeSheetDialog 
          fromdate={this.state.fromdate}
          todsate={this.state.todate}         
          show={this.state.showmodel}
          onHide={this.handleModelShow}
          dataSource={this.state.selectedtsrow}
          key = {this.state.selectedtsrow.id}/>

如果selectedtsrow被更改，则该组件将被重新渲染。更多信息在这里=> more info

将父道具设置为子组件变量

2 个答案: