Question

我想学习重构，但是我不知道如何使代码完美。

class ClassComponent extends React.Component {
  state = {
    isClicked: false
  };

  handleClicked = () => {
    const btn = document.querySelector('button');
    const content = document.querySelector('#content');
    if(!this.state.isClicked){
      this.setState({ isClicked: true});
      content.style.display = 'none';
      btn.textContent ='Show';
    } 
    else {
      this.setState({ isClicked: false });
      content.style.display = '';
      btn.textContent ='Hide';
    }
  }

  render() {
    const heading3 = 'this is a heading inside class component';
    const p1 = 'this is a paragraph inside class component';
    return (
      <div>
        <button onClick={this.handleClicked}>Hide</button>
        <div id='content'>
          <h1>{heading3}</h1>
          <p>{p1}</p>
        </div>
      </div>
    );
  }
}

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

Answer 1

您应该避免阅读和操作DOM，而应将其留给React。

对于您所需要的，条件渲染就可以了。

首先，让我们重构handleClick方法：如果想到的话，它应该只切换状态isClicked。然后执行以下操作：

handleClicked = () => {
  this.setState(prevState => ({
    isClicked: !prevState.isClicked
  }))
}

这是怎么回事？

您正在执行setState，但是您需要访问先前/当前状态。由于React会进行状态更新批处理，因此将{r1}更新函数而不是新对象传递给setState更为安全。

updater函数将状态对象作为输入，并返回一个新的对象。输入状态对象将由React在setState调用中提供。

然后...

能够切换isClicked道具，您可以使用条件渲染基于该道具值选择要渲染的内容：

render() {
  return (
    <div>
      <button onClick={this.handleClicked}>
        { this.state.isClicked ? "Hide" : "Show" }
      </button>
      { this.state.isClicked && (
        <div id='content'>
          <h1>this is a heading inside class component</h1>
          <p>this is a paragraph inside class component</p>
        </div>
      }
      </div>
  );
}

这是怎么回事？

这里有两个条件渲染的例子。

第一个是：

<button onClick={this.handleClicked}>
  { this.state.isClicked ? "Hide" : "Show" }
</button>

我们在这里说：检查状态对象的isClicked属性，如果它是true，则呈现字符串“ Hide”，否则呈现字符串“ Show”。

第二种条件渲染技术是：

{ this.state.isClicked && (
  <div id='content'>
    <h1>this is a heading inside class component</h1>
    <p>this is a paragraph inside class component</p>
  </div>
}

这是一个相当常见的Javascript语句：如果第一个条件是true，则返回&&运算符的另一面，否则返回false。

React不会呈现false，null，undefined，而且可能不会呈现我现在正在放弃的东西。

这意味着，如果isClicked属性为true，则该表达式将返回包含<div id='content'...等的jsx，然后将其呈现，否则返回false，则不会呈现任何内容。

希望有帮助。

如何重构此代码？如何使此代码更好？

1 个答案: