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

但是这要视情况而定，您真的不想让父母这样说孩子。

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

1 个答案: