javascript - react : dynamic rendering of a component based on state

Question

我有一个 Parent(带有三个按钮的蓝色框)和一个 Child(显示内容的红色框)组件，它们根据 呈现一些文本 child 的状态。基本上，呈现的 View 是这样的:

子组件:

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。

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>