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

Question

我有一个Parent（带有三个按钮的蓝色框）和一个Child（显示内容的红色框）组件，它们根据Child 的状态呈现一些文本。基本上，渲染的视图是这样的：

Child 组件：

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;

Parent 组件：

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 包装起来。

Answer 1

当组件的state 或props 更改时，组件将被重新渲染。除了将初始的tab 属性存储在Child 组件的状态中，您还可以直接使用该属性（您还可以在下面修复一些拼写错误）。

示例

class Child extends React.Component {
  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>;
  }
}

class Parent extends React.Component {
  state = {
    tab: null
  };

  onOneClick = e => {
    this.setState({ tab: "1" });
  };
  onTwoClick = e => {
    this.setState({ tab: "2" });
  };
  onThreeClick = e => {
    this.setState({ tab: "3" });
  };

  render() {
    return (
      <div>
        <button type="button" onClick={this.onOneClick}>
          1
        </button>
        <button type="button" onClick={this.onTwoClick}>
          2
        </button>
        <button type="button" onClick={this.onThreeClick}>
          3
        </button>
        <Child tab={this.state.tab} />
      </div>
    );
  }
}


ReactDOM.render(<Parent />, document.getElementById('root'));

<script src="https://unpkg.com/react@16.4.1/umd/react.production.min.js"></script>
<script src="https://unpkg.com/react-dom@16.4.1/umd/react-dom.production.min.js"></script>

<div id="root"></div>