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就会正确打印更改后的状态（{{ 1}}）但永远不会被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，并且由于此错误的整体奇怪行为，它并没有实际测试它。请看下面的答案。

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％它将由内容替换，但具有空数据道具。我会说数据道具没有在合适的时间填充？如果您在加载栏消失时控制台注销数据道具会发生什么？

你的所有州都是以正确的方式定义的吗？

Answer 3

好吧，显然问题出现在我的代码中，React没有任何问题，它的工作原理与您期望的完全一样。我在jsfiddle上实现了整个示例，以便在一个独立的环境中对其进行测试，以便您可以查看它：http://jsfiddle.net/9u4nmcrn/9/

它就像一个魅力。

简要解释一下：在我的真实应用中，status不是字符串，它是一个具有两个属性的对象：isLoading（表示请求是否正在进行的布尔值）和{ {1}}（表示请求是否成功完成的布尔值）。问题是我在我的外部组件中测试了done而在done中测试了isLoading（一旦LoadingBar翻转为假，它就会隐藏自己。由于某些其他原因，布尔值isLoading从未翻转到done。结果，true消失了但它从未被LoadingBar取代，因为Content仍然是假的。不幸的是，我从一开始就确信React肯定有问题所以我甚至没有做过非常基本的调试。

作为prop

3 个答案: