ReactJS 無狀態組件參數

Question

ReactJS 無狀態組件參數的首選/正確選擇是什么？ 是道具還是列出所有道具名稱？

選擇1：

const Checkbox = props => {}

選擇2：

const Checkbox = ({name, value}) => {}

Answer 1

這里沒有錯誤的選擇。

如果您只有一些道具，例如在您的示例name和value您可以解構它們。 如果你有 10 個以上的 props，我認為最好只使用props然后在組件體中使用它們，只是因為視覺風格。

Answer 2

您想要使用組件的方式取決於您的組件是如何實現的，這也是個人喜好的問題。 功能組件作為props作為參數 post 傳遞，您可能更喜歡按原樣使用它或對其進行解構

選擇 1：const Checkbox = props => {}

大多數情況下，當您希望使用太多 props 或將它們全部傳遞給子組件時，您可能會使用上述方法

選擇 2：const Checkbox = ({name, value}) => {}

上面的模式是你從 props 中解構name和value地方。 當您只需要在所有傳遞的 props 中使用name和value時，您可以選擇這樣做

Answer 3

我認為沒有首選/正確的方法可以做到這一點，我認為經驗法則應該是參數的數量。 如果你有超過 6 個參數，代碼開始看起來很亂，你總是可以在你的組件中使用對象解構賦值

Answer 4

選擇是你的，兩種方式都很好，基於組件使用

1）你可以在組件很大時使用（使用更多的道具）：

選擇 1：const Checkbox = props => {}

2）當組件較小時可以使用，並且需要2或3個道具

選擇 2：const Checkbox = ({name, value}) => {}

使用哪一個沒有標准，這完全取決於你，但是當組件很大時使用choice-1，這使代碼更清晰。