reactjs - 使用 redux 从子组件更新根组件的属性

Question

我有两个组件，即包含数据列表的根组件。数据从firebase显示。第二个组件是帮助选择日期的 DateRangepicker，因此我们可以过滤根的组件数据。

    class Child extends React.Component {
    pickDateRange = (e: React.FormEvent<HTMLFormElement>) => {
    // getting data successufly from firebase
    // this is where I get the error trying to set the root component's props
    this.props.data = data
    }
    render() {
    return (
            <div>
                <form onSubmit={this.pickDateRange} className={classes.container} noValidate>
                    <TextField
                        id="datestart"
                        label="Starting Date"
                        type="date"
                        onChange={this.handleStartDate}                        
                    />
                    <TextField
                        id="dateend"
                        label="Ending Date"
                        type="date"
                        onChange={this.handleEndDate}
                        className={classes.textField}                        
                    />
                    <Button
                        type="submit"
                    >
                        Filter
                </Button>
                </form>                
            </div>
        );
    }}

class Parent extends React.Component {
       render() {
                 return (<div> <ChildB data={this.state.data}/></div>)
}}

Answer 1

您不能从子组件内部更改道具，或者通过道具从父级传递回调到子级，或者使用子组件中的状态或使用您的 redux 存储。

那么简单的解决方法是：

this.props.changeData(data)

与父渲染：

render() {
   return (<div> <ChildB data={this.state.data} changeData={(data)=>{this.setState({data: data})}/></div>)
}

但这取决于你，你真的不想通过这样的孩子来设置父母的状态。