如何向React JS组件添加不可更改的属性？

Question

假设我有一个React JS组件,为了便于使用,我希望该组件可以访问将索引映射到文本的数组.

例如,假设在场景AI中传递组件ID 1,而在场景BI中传递组件ID 3.我希望组件"知道"如何处理这些ID,因此我希望组件本身具有如下所示的数组:

[
    0 => 'Text for scenario 0',
    1 => 'Text for scenario 1',
    2 => 'Text for scenario 2',
]

现在,我个人知道有两种方法可以让这个组件访问该数组.我可以将它定义为state构造函数中的一部分:

constructor() {
    this.state = {
        // put the array here
    }
}

或者,我可以将其作为默认道具:

Component.defaultProps = {
    // put the array here
}

然后,这将允许组件从任一this.state或访问数组this.props.

但是,我不喜欢这两个选项中的任何一个,因为它们都允许更改数组.如果我把它放入state,那么数组可以从(几乎)组件内的任何地方更改,如果我把它放入props,那么组件可以作为prop传递一个替代数组.

那么:在React JS中,有没有办法在组件上定义一个静态的,不可更改的属性？

Answer 1

你不应该把React状态的东西放在那些不会被反应或以某种方式操纵的东西上,并将它设置为默认的prop不是一个很好的解决方案,因为这意味着有时组件会收到该名称的支柱.

一种解决方案可能是设置一个只返回此列表的函数:

getIdList() {
    return [];
}

但是,我认为更好的解决方案是将其定义为React组件上方的const.看到这些数据永远不会改变,它实际上并不需要存在于组件本身中.

所以,这就像下面这样:

const idArray = [];

class SomeReactComponent extends React.Component {