Question

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

例如，让我们说在方案A中我传递了组件ID 1，而在方案B中我传递了组件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中，那么组件可以作为支柱传递替代数组

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

Answer 1

你不应该把事物置于React状态，不会以某种方式被反应或操纵，并将其设置为默认支柱也不是一个很好的解决方案，因为这意味着有时组件将获得支柱那个名字。

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

getIdList() {
    return [];
}

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

所以，这就像下面这样：

const idArray = [];

class SomeReactComponent extends React.Component {

Answer 2

由于每个模块都有自己的作用域，因此您可以将数组本地放在组件的模块中（在组件上方）。如果你不导出它，它将是私人的

const texts = [
    'Text for scenario 0',
    'Text for scenario 1',
    'Text for scenario 2',
]

export default class MyComponent extends Component {
  ...you can access texts as a const here
}

Answer 3

你可以将变量保存在不仅仅是你想要在这里使用的状态和道具，因为这个数组既不是组件的状态，也不是传递给它的属性。

正如其他人所说，您可以将数组存储在文件的其他位置，并在组件中引用它。

您可以将数组存储为组件的属性，并在需要时将其引用为this.myArray：

<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.min.js"></script>

或者，如果数组不会从组件的一个实例更改为下一个组件，则可以将其存储为组件的静态属性，并在需要时将其作为MyComponent.myArray引用：

constructor(props) {
  super(props);
  this.myArray = [1, 2, 3];
}

将它放在文件中的其他位置的解决方案是一个很好的解决方案，特别是如果它是一个const变量，或者你可能想要在项目的其他地方导出和使用它。

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

3 个答案: