反應：反應組件上的道具數量是否有可觀的限制

這有什麼固有的問題嗎？

例如

render() { 

    const { create, update, categories, locations, sectors, workTypes, organisation } = this.props; // eslint-disable-line no-shadow 

    return (
    <div className="job-container"> 
     <JobForm 
     organisationId={organisation.id} 
     userId={user.id} 
     action={action} 
     create={create} 
     update={update} 
     categories={categories} 
     locations={locations} 
     sectors={sectors} 
     workTypes={workTypes} 
     /> 
    </div> 
); 
}

什麼是最佳實踐？

來源

2016-06-08 AndrewMcLagan

我不認爲React組件可以具有的屬性數量有任何問題。它看起來不錯。 – vijayst

你在尋找什麼類型的最佳做法？例如，你可以通過使用spread運算符來縮短你的語法。 – larrydahooster

最好的做法是在組件中使用propTypes來宣告道具的形式。除此之外，您可以隨意放置儘可能多的道具。另外，至少對於公共組件，有很好的默認設置來促進簡潔的使用。 – hazardous

我認爲你已經公正地認識到了代碼味道。任何時候，如果你有很多輸入（道具）到一個函數（組件），你必須質疑，你如何用參數組合的所有排列來測試這個組件。使用{...this.props}來傳遞它們只會降低打字速度，有點像在炸死屍體上噴射炸彈。

我想問爲什麼你有一個create和update方法vs提交方法？

你好如何使用organisationId和userId？如果只需要傳遞給create和update（或submit）方法，那麼爲什麼不通過它們並讓處理程序提供它們呢？

也許JobForm應該呈現爲：

<JobForm /* props go here */> 
    <CategoryDroplist categories=this.props.categories /> 
    <LocationDroplist locations=this.props.locations /> 
</JobForm>

在JobForm你有props.children但那些都是獨立的組件，可能被罰款作爲單獨的部件。

我只是沒有足夠的信息來回答這個問題，但是通過將組件分解成更簡單的東西，道具的數量減少了，氣味也減少了。

來源

2017-02-08 18:46:16 boatcoder

除了冗長外，沒有任何問題，但當然，這會使您的組件從根本上難以維護。

使其更普遍的一種常見方法是使用展開運算符來代替傳遞所有這些道具並用簡寫。

<JobForm {...this.props} />

的另一種方法來解決這個問題是通過分割它成可代替由更小，更集中的組件共享組件的責任。

來源

2016-06-08 09:28:13

雖然道具將傳遞下來，但與此組件無關。 – AndrewMcLagan

多年來一直有許多語言的風格指南，建議限制一個函數的參數數量。即使ESLint也有一條規則，並指出：「......難以閱讀和書寫，因爲它需要記住每個參數的類型，以及它們應該出現的順序。」

我認爲這在JSX中也是如此。而且，因爲JSX是JS的DSL，我們正在編譯代碼氣味。

來源

2017-12-09 13:05:00

反應：反應組件上的道具數量是否有可觀的限制

回答

相關問題