Javascript React：基于状态的组件动态渲染

我有一个

父项

（带三个按钮的蓝色框）和一个

子项

（显示内容的红色框）组件，它们根据

子项

的状态呈现一些文本。基本上，渲染视图如下所示：

子组件

组件：

class Child extends Component {
  constructor(props) {
    super(props);
    this.state = {
      tab: this.props.tab
    }
  }
  render() {
    let text;

    if (this.props.tab === '1') {
      text = <div>text 1 </div>
    } else if (this.props.tab === '2') { 
      text = <div>text 2 </div>
    } else if (this.props.tab === '3') {
      text = <div>text 3 </div>
    }
  return (
    <div>
      {text}
    </div>
    );
  } 
}

export default Child;

class Parent extends Component {
  constructor(props) {
    super(props);
    this.state = {
      tab: null
    }
    this.onOneClik = this.onOneClik.bind(this);
    this.onTwoClik = this.onTwoClik.bind(this);
    this.onThreeClick = this.onThreeClick.bind(this);
  }
  onOneClik(e) {
    this.setState({ tab: '1' });
  }
  onTwoClik(e) {
    this.setState({ tab: '2' });
  }
  onThreeClick(e) {
    this.setState({ tab: '3' });
  }
  render() {
    return (
      <div>
        <button type="button" onClick={this.onOneClik}>1</button>
        <button type="button" onClick={this.onTwoClik}>2</button>
        <button type="button" onClick={this.onThreeClik}>3</button>
      </div>
      <div>
        <Child tab={this.state.tab} />
      </div>
    );
  }
}

问题是，我需要在单击按钮时重新呈现子级，但子级仅显示首先单击的按钮的内容，即使在单击不同的按钮时父级的状态会自动更新

---

在不涉及链接的情况下动态呈现子对象的方法是什么？我想redux可能会有所帮助，但我不确定如何包装redux。

当组件的

状态或
道具更改时，组件将被重新渲染。您可以直接使用道具，而不是将初始的
选项卡
道具存储在
子组件的状态下（也可以在下面修复一些拼写错误）

示例


类子级扩展React.Component{
render（）{
让文字；
如果（this.props.tab==“1”）{
文本=文本1；
}否则如果（this.props.tab==“2”）{
文本=文本2；
}否则如果（this.props.tab==“3”）{
文本=文本3；
}
返回{text}；
}
}
类父类扩展了React.Component{
状态={
选项卡：空
};
onOneClick=e=>{
this.setState（{tab:“1”}）；
};
onTwoClick=e=>{
this.setState（{tab:“2”}）；
};
ontreeclick=e=>{
this.setState（{tab:“3”}）；
};
render（）{
返回(
1.
2.
3.
);
}
}
ReactDOM.render（，document.getElementById（'root'））
@Ruham不客气！是的，把道具放在州里很有诱惑力，但大多数时候你真的不需要。