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

我想学习重构，但我不知道如何才能使我的代码完美

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')
);

class类组件扩展了React.Component{
状态={
isClicked:错误
};
handleClicked=（）=>{
const btn=document.querySelector（'button'）；
const content=document.querySelector（“#content”）；
如果（！this.state.isClicked）{
this.setState（{isClicked:true}）；
content.style.display='none'；
btn.textContent='Show'；
} 
否则{
this.setState（{isClicked:false}）；
content.style.display=''；
btn.textContent='Hide'；
}
}
render（）{
const heading3='这是类组件内部的标题'；
常量p1='这是类组件内的一个段落'；
返回(
隐藏
{heading3}
{p1}

);
}
}
ReactDOM.render(
,
document.getElementById（'root'））
);

您应该避免读取和操作DOM，让它自行反应

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

首先，让我们重构

handleClick

方法：如果您想到它，它应该只切换状态

isClicked

。那么就这样做：

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

这里发生了什么事？

您正在执行

设置状态

，但需要访问上一个/当前状态。由于状态更新批处理由React完成，因此将更新程序函数传递给

setState

比传递给新对象更安全

updater函数接受一个状态对象作为输入，并返回一个新对象。输入状态对象将由React在

setState

调用中提供

---

然后

通过切换“单击”属性，您可以使用条件渲染根据该属性值选择要渲染的内容：

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>
  );
}

这是一个相当常见的Javascript语句：如果第一个条件是

true

，则返回

&

运算符的另一侧，否则只返回

false

React不会呈现

false

，

null

，

未定义的

，可能是我现在正在忘记的东西

---

这意味着，如果

isClicked

属性为true，则该表达式将返回包含

的jsx。您应该避免读取和操作DOM，让它自行反应

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

首先，让我们重构
handleClick
方法：如果您想到它，它应该只切换状态
isClicked
。那么就这样做：

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

这里发生了什么事？

您正在执行
设置状态
，但需要访问上一个/当前状态。由于状态更新批处理由React完成，因此将更新程序函数传递给
setState
比传递给新对象更安全

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


然后

通过切换“单击”属性，您可以使用条件渲染根据该属性值选择要渲染的内容：

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>
  );
}

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

React不会呈现
false
，
null
，
未定义的
，可能是我现在正在忘记的东西

这意味着，如果
isClicked
属性为true，则该表达式将返回包含