反应如何将变量传递给component.jsx到另一个组件jsx

Question

我有一个组件 bar.jsx：

render(){
        return(
          <div className="bar">
            <button className="button" onClick={() => this.setState({view: 1})}>1</button>
            <button className="button" onClick={() => this.setState({view: 2})}>2</button>
            <button className="button" onClick={() => this.setState({view: 3})}>3</button>
            <button className="button">Wallet</button>          
          </div>

我还有另一个组件想要获取这些数据：

主.jsx：

render() {
    return (
      <div className="App">
        <div className="header"></div>
        <bar></bar>
        <View></View>
      </div>
    );
  };

如何将this.setState({view: 1})值解析为我的View组件？

Answer 1

为此，您需要将 state 提升到 main.jsx。 所以在 main.jsx 你创建 state {view: 0}或其他一些默认值。 然后你创建一个 function 来设置这个 state （在这种情况下你不能使用this.setState ），它基本上是this.setState的一个包装器。 然后你将这个 function 传递给你的bar组件。

Bar 组件将其附加到按钮而不是您拥有的() => this.setState({view: 1}) 。

从主要组件中，您将view作为道具传递。

当用户点击按钮时，change function被调用，change function调用主组件中的setState。 主组件的 state 已更改，它更改了 View 组件的 prop。 视图组件呈现新数据。

您可以在这里阅读更多信息 - https://reactjs.org/docs/lifting-state-up.html