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

Question

>我有两个组件，包含数据列表的根组件。 数据显示自 Firebase。 第二个组件是一个日期范围选择器，它可以帮助选择日期，以便我们可以过滤根的组件数据。

    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

您不能从子组件内部更改 props，也不能通过 props 将父组件的回调传递给子组件，也不能在子组件中使用状态或使用 redux 存储。

那么简单的解决方法是：

this.props.changeData(data)

使用父渲染：

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

但这取决于，你真的不想让父母像那样让孩子