作为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一定有问题，所以我什至没有做最基本的调试。