Javascript 如何将变量传递给component.jsx和另一个组件jsx

我有一个组件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>

render（）{
返回(
this.setState（{view:1}）}>1
this.setState（{view:2}）}>2
this.setState（{view:3}）}>3
钱包

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

main.jsx：

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

render（）{
返回(
);
};

---

如何将

this.setState（{view:1}）

值解析到我的

view

组件中？

为此，需要将状态提升到main.jsx。 因此，在main.jsx中创建state

{view:0}

或其他默认值。然后创建一个设置此状态的函数（在本例中不能使用

this.setState

），它基本上是

this.setState

的包装器。然后将此函数传递给

bar

组件

条形组件将其附加到按钮，而不是您拥有的.setState（{view:1}）

从主组件，您将

视图作为道具传递

当用户单击按钮时，将调用change函数，change函数将调用主组件中的setState。主组件的状态将更改，并更改View组件的属性。View组件将呈现新数据

您可以在此处了解更多信息-
您应该使用“提升状态提升”