作為prop傳遞的React組件的行為

Question

在大多數情況下，您將組件作為children組件傳遞到另一個組件。 但是我已經看到（例如，在幾個UI庫中）組件也可以使用標准命名的props進行傳遞。 我也嘗試過，但是遇到了一些限制，我在文檔中找不到任何有關它的信息（實際上應該如何工作）。

這是我要實現的目標：

const App = ({ status, data }) => {
  return <Layout
    sidebar={<CustomSidebar />}
    toolbar={<CustomToolbar />}
    content={status == 'loading' ? <LoadingBar status={status} /> : <Content data={data} />}
  />
};

const LoadingBar = ({ status }) => <span>Loading... (current status: {status})</span>

正如您在這里看到的，僅使用children是不夠的，我想傳遞多個組件，將其放置在正確的位置是Layout'的工作。 顯然，我這樣做的原因是我想重新使用Layout 。

但這是行不通的。 LoadingBar正確顯示，但是一旦加載數據（ status從loading更改為done ）， LoadingBar正確打印更改后的狀態（ done ）， 但永遠不會被Content組件替換。 實際上，它永遠不應該done打印，而應該消失。

我做了一些實驗，並且只有當我將完全靜態的組件作為props傳遞時（即輸入沒有改變），它才起作用。 這工作：

const App = ({ status, data }) => {
  return <Layout
    sidebar={<CustomSidebar />}
    toolbar={<CustomToolbar />}
    content={<ContentWrapper />}
  />
};

const mapStateToProps = (state, props) => { ... };

const ContentWrapper = connect(mapStateToProps)(({ status, data }) => {
  return status == 'loading' ? <LoadingBar status={status} /> : <Content data={data} />;
});

如您所見， ContentWrapper組件已連接到redux存儲，因此它完全在父組件上獨立更新。

有沒有辦法使最初的例子起作用？ 還是我做錯了什么？ 這種方法得到認可嗎？

編輯：整個事情是我的代碼中的錯誤。 由於此錯誤的整體怪異行為， status從未改變為done並且我沒想到要進行實際測試。 看下面我的回答。

Answer 1

在最初的示例中，您僅傳遞了<LoadingBar>或<Content> 。 如何實現所需的目標可能會有很多變化。 一種選擇是將這兩個元素都作為單獨的道具傳遞，並將status作為道具傳遞，並讓<Layout>決定如何處理它們。 或者，您可以根據需要執行以下操作：

content={function (status, data) {
  return status == 'loading' ? <LoadingBar /> : <Content data={data} />;
}}

Answer 2

您的代碼似乎正確。 這不是國家問題嗎？

content={status === 'loading' ? <LoadingBar /> : <Content data={data} />}

狀態更改后，您的LoadingBar將消失。 然后，將100％替換為Content，但使用一個空的數據道具。 我想說的是，數據道具沒有在正確的時間填充？ 如果在加載欄消失時控制台退出數據道具，會發生什么情況？

是否以適當的方式定義了所有狀態？

Answer 3

好的，顯然問題出在我的代碼中，React沒有任何問題，它的運行完全符合您的期望。 我在jsfiddle上實現了整個示例，以在單獨的環境中對其進行測試，因此您可以檢出它： http : //jsfiddle.net/9u4nmcrn/9/

它像一種魅力。

---

簡要說明一下：在我的真實應用中， status不是字符串，而是一個具有兩個屬性的對象： isLoading （布爾值指示請求是否正在進行中）和done （布爾值指示請求是否成功完成）。 問題是，我在測試done我的外部組件和isLoading在LoadingBar （它隱藏自身，一旦isLoading翻轉為false）。 對於一些其他原因布爾done從來沒有翻到true 。 因此結果是， LoadingBar消失了，但是它從未被Content取代，因為done仍然是錯誤的。 不幸的是，我從一開始就堅信React一定有問題，所以我什至沒有做最基本的調試。