如何將一個不可更改的屬性添加到React JS組件？

假設我有一個React JS組件，並且爲了便於使用，我希望該組件可以訪問將索引映射到文本的數組。如何將一個不可更改的屬性添加到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中，有沒有一種方法可以在組件上定義一個靜態的，不可更改的屬性？

來源

2017-10-05 CGriffin

由於每個模塊都有自己的作用域，因此您可以將數組本地放在組件的上面（組件上方）。如果你不出口它將是私人的 – Peter

嘿彼得 - *呃*，我不知道爲什麼我沒有想到這一點。你通過10秒的時間擊敗了實際的答案 - 如果你想發佈這個答案，我會接受它，否則我會接受那個。 – CGriffin

由於每個模塊都有它自己的範圍你可以把數組本地您的組件（上面的組件）的模塊中。如果你不導出這將是私人

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 
}

來源

2017-10-05 21:19:42 Peter

你不應該把事情置於不會被反應或以某種方式被操縱的React狀態中，並將其設置爲默認支持不是一個好的解決方案，因爲這意味着有時組件會接收到這個名字的支柱。

一個解決辦法是建立一個功能簡單地返回該列表：

getIdList() { 
    return []; 
}

不過，我認爲更好的解決辦法是隻把它定義爲陣營組件的上方一個常量。看到這些數據永遠不會改變，它並不需要在組件本身中生存。

所以，表示想類似以下內容：

const idArray = []; 

class SomeReactComponent extends React.Component {

來源

2017-10-05 21:14:48

您可以保存變量不僅僅是狀態和道具，這兩者都不希望你要在這裏使用更多，因爲這陣是組件的既不狀態或傳遞給它的財產。

正如其他人所說，您可以將數組存儲在文件的其他位置，並在組件中簡單引用它。

您可以存儲陣列作爲組件的屬性，而只是引用它作爲this.myArray需要的地方：

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

或者，如果陣列是不會從的一個實例改變組件到下一個，你可以將其存儲爲組件的靜態屬性和引用它作爲MyComponent.myArray需要的地方：

static myArray = [1, 2, 3];

的解決方案，只需將其他地方的文件中是一個很好的，特別是如果它是一個常量變量，或者如果你可能想要前港口，並在你的項目的其他地方使用它。

來源

2017-10-05 22:24:59

如何將一個不可更改的屬性添加到R​​eact JS組件？

回答

相關問題

如何將一個不可更改的屬性添加到React JS組件？