每次我在React中处理内部组件状态时,都必须先为state属性定义一个空对象,否则我会在抛出this.state is undefined
时遇到运行时错误
如果我要这样做:
render() {
const { someProperty } = this.state;
render <div>{someProperty}</div>
}
我会出错。
但是治愈方法很简单:
constructor(props) {
super(props);
this.state = {};
}
但是,对于我创建的每个组件,一遍又一遍地执行此操作非常烦人。
是否可以以某种方式强制将全局初始状态添加为空对象,从而避免所有用于定义空状态的样板?
P.s. (也许是修辞性的问题)为什么不能在同一个React核心中完成此操作?
最佳答案
您可以从实现此方法的React.Component
扩展您自己的»component base class«,然后从该类派生所有组件。
import { React } from 'react';
class StatefulComponent extends React.Component {
constructor(...args) {
super(...args);
this.state = {};
}
}
export default StatefulComponent;
。
class MyComponent extends StatefulComponent {
render() {
const { something } = this.state;
return (<div>Hello, {something}</div>);
}
}
(Live Demo)
通常不鼓励在React中扩展组件,因为它不是惯用的。在需要状态的(每个)组件中添加
this.state = {}
确实没有什么害处。但是,如果您要走那条路,就可以做到。由于许多(或大多数)组件不需要状态,因此您将分配浪费的内存。这已经在react#1851中进行了讨论:
关于reactjs - 是否可以在React中将初始状态设置为空对象?,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/45456064/