Question

我是React Typescript的新手，我想将一些数据从父母传递给孩子。因此，基本上，每当用户单击特定元素时，它就会激活父组件中的功能。当该函数运行时，它将布尔值更改为oppostite，可以正常工作。然后它将值传递给另一个孩子。但是，由于某些原因，从父级传递给子级的值永远不会改变。它应该像这样工作：

孩子1 --activateFunction --->父--runFunction-> this.state.hideCart = false / true

父级--this.state.hideCart->子级2 --coverCart = this.props.hideCart-

但是，Child 2中的值永远不会正确更新，我不知道为什么。

      /*CHILD 1*/
export default class Navbar extends Component <{handleCart:any}> {
    render() {
        return (
            <div style={navbar}>
                <h1>Navbar</h1>
                <h4 onClick={() => this.props.handleCart()}>Shopping Cart</h4>
            </div>
        )
    }
}


       /*PARENT*/
export default class Layout extends Component <{fixCart?:boolean}> {

    state = {
        hideCart: true
    }

    render() {
        return (
            <div style={layout}>
                <Navbar handleCart={this.displayCart} />
                <Counters fixCart={this.state.hideCart} />
                <Content />
                <Footer />
            </div>
        )
    }

    displayCart = () => { 
        if (this.state.hideCart == true) {
            this.setState({hideCart: false})
        }
        else {
            this.setState({hideCart: true})
        }
        console.log(this.state.hideCart);

    }
}



        /*CHILD 2*/
export default class Counters extends Component <{fixCart:any},State>{
    state = { 
        counters: [
            { id: "vegetables", value: 1},
        ],
        hideCart: this.props.fixCart
    }
}

Answer 1

您使用的方法使用户以及代码审阅者感到困惑。为了解决这类数据传递功能，引入了React-Redux。全局维护状态变量，您将可以从任何地方访问。

然后顺便说一句，请尝试检查您在子组件中收到的道具的值。我建议您更好地使用React-Redux-Store。希望对您有所帮助！。

将更新后的状态值从父级传递到子级。反应打字稿

1 个答案: