你如何改变从同一个类中渲染的 jsx 块？

Question

我仍在学习 React 的基础知识，我想做一些引起我注意的事情。这是关于渲染两件事。是否有可能或什至可能只是更改使用函数呈现的内容，然后使用按钮或计时器分别调用这些函数？

这是一个示例代码，展示了它如何渲染两个完全不同的东西。它应该呈现一个显示“状态：开启”或“状态：关闭”的按钮。当您单击按钮时，状态会发生变化。而且，整个渲染方法都被切换了......或者至少这是应该发生的事情。

class Flicker{
    constructor(props){
        super(props);
        this.state = {mode: "on"};
    }
    flipOn(){
        this.setState({mode: "on"})
    }
    flipOff(){
        this.setState({mode: "off"})
    }
    if (this.state.mode == "on"){
        render() {
            return(
                <button onClick={this.flipOn}>State: On</button>
            );
        }
    } else if (this.state.mode == "off"){
        render() {
            return(
                <button onClick={this.flipOff}>State: Off</button>
            );
        }
    }
}
export default Flicker;

如果这不是对 jsx 在应用程序上呈现的内容进行此类更改的正确方法，应该如何进行？

Answer 1

你的组件改变了状态。状态是布尔值——开（真）或不开（假）。由于您的状态在两个值之间切换，因此您可以使用单一方法 (toggle)。既然我们检查之前的状态，最好setState via updater。

您需要绑定method to this，通过在构造函数中使用bind（方法4）或通过实例方法（方法5）使用箭头函数。

现在在（单）渲染中，只需要根据on的状态改变text即可：

class Flicker extends React.Component{
  state = { on: true };

  toggle = () =>
    this.setState(({ on }) => ({ on: !on }));

  render() {
    const text = this.state.on ? 'On' : 'Off';

    return (
      <button onClick={this.toggle}>State: {text}</button>
    );
  }
}

ReactDOM.render(
  <Flicker />,
  demo
);

<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>

<div id="demo"></div>

现实世界的例子

按钮可能应该通过道具获得on 和toggle。现在它们都可以在外面使用了，Flicker 唯一关心的就是点击时调用toggle，并根据on 更改文本：

const Toggler = ({ on, toggle }) => (
  <button onClick={toggle}>
    State: {on ? 'On' : 'Off'}
  </button>
);

class Flicker extends React.Component {
  state = { on: true };

  toggle = () =>
    this.setState(({ on }) => ({ on: !on }));
  
  render() {
    const { on } = this.state;
  
    return (
      <div>
        <Toggler toggle={this.toggle} on={on} />
        {on &&
          'I\'m displayed only when I\'m On'
        }
      </div>
    );
  }
}

ReactDOM.render(
  <Flicker />,
  demo
);

<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>

<div id="demo"></div>

Answer 2

将条件逻辑放在 render() 方法中。

这样的……

class Example extends React.Component {
  // the rest of your code

  render() {
     const { mode } = this.state;
          return(
              <div>
                 {mode ==="on" && <button onClick={this.flipOn}>State: On</button> }
                 {mode === "off" && <button onClick={this.flipOff}>State: Off</button>}
               </div>
          )
    }
}

Answer 3

你的想法是对的——但是在一个类中只有一个渲染方法。您的逻辑确实属于渲染内部。这应该可以满足您的需求：

class Flicker extends React.Component {
    constructor(props){
        super(props);
        this.state = {mode: "On"};
    }

    flipOn(){
        this.setState({mode: "On"})
    }

    flipOff(){
        this.setState({mode: "Off"})
    }

    render () {
        return (
            <button onClick={(this.state.mode === 'Off') ? this.flipOn : this.flipOff}>State: {this.state.mode}</button>
        )
    }
}

export default Flicker;