Question

我开始学习reactjs，发现每次都重写this.state和this.props非常烦人。我试图在render函数中创建2个变量，如下所示： let state = this.state; let props = this.props; 用state代替this.state并用props代替this.props，但是没有办法在整个组件中做到这一点吗？

Answer 1

您可以利用解构协助。

可能是组件中有一个构造函数：

constructor(props) {
  super(props);
  this.state = {color: 'green'};
}

如果要访问它，则必须写：

<div>Color here:{this.state.color}</div>

说在一个组件中，您可能有多个状态变量。因此，您要避免重复编写this.state.variableName。'

因此您可以对其进行破坏：

const {variableName1, variableName2} = this.state;

因此，当您需要访问它时，只需编写它：

<div>{variableName1}</div>

因此您可以摆脱写完整的{this.state.variableName1}

const variableName1 = this.state.variableName1
const variableName2 = this.state.variableName2

因此您可以通过分解代码来减少编写代码：

const {variableName1, variableName2} = this.state;

和道具的格式也一样。

在reactjs中避免this.state和this.props

1 个答案: