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

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

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;

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

您的组件更改状态。状态为布尔值-启用（true）或不启用（false）。由于您的状态在两个值之间切换，因此可以使用一个方法（toggle）。由于我们检查了先前的状态，因此最好setState via updater。

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

现在，在（单个）渲染中，您仅需要根据text的状态更改on：

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>

您如何更改从同一类内部呈现的jsx块？

3 个答案: