React 应用中添加的容器在哪里？答案

【问题标题】：Where is added container in React app?React 应用中添加的容器在哪里？
【发布时间】：2018-06-13 04:30:45
【问题描述】：

我分叉了这个 React 应用程序：https://github.com/react-boilerplate/react-boilerplate

目前我正在尝试向应用显示一个名为“Schedule”的简单容器，该容器是通过应用生成的：

export class Schedule extends React.Component { // eslint-disable-line react/prefer-stateless-function
  render() {
    return (
      <div>
        <Helmet>
          <title>Schedule</title>hoera
          <meta name="description" content="Description of Schedule" />
        </Helmet>
      </div>
    );
  }
}

现在我正在尝试在另一个容器中使用这个容器：

import Schedule from 'containers/Schedule';

    <AppWrapper>
                  <Schedule></Schedule>
                  <Helmet
                    titleTemplate="%s - React.js Boilerplate"
                    defaultTitle="React.js Boilerplate"
                  >
                    <meta name="description" content="A React.js Boilerplate application" />
                  </Helmet>
                  <Header />
                  <Switch>
                    <Route exact path="/" component={HomePage} />
                    <Route path="/features" component={FeaturePage} />
                    <Route path="" component={NotFoundPage} />
                    <Route path="/schedule" component={Schedule} />

                  </Switch>
                  <Footer />
    <AppWrapper/>

问题是没有显示日程安排。我怎样才能显示这个容器？完整来源：react-boilerplate

【问题讨论】：

我认为您的组件实际上没有显示。是否被其他文件中的其他组件替换？

标签： reactjs react-boilerplate

【解决方案1】：

你没有收到错误吗？您的 Schedule 组件是命名导出而不是默认值。所以你需要将它导入为：

import { Schedule } from "containers/Schedule";

或者不给它命名，直接导出为默认值：

export default class extends React.Component {
    ....
}

你也不需要像这样使用你的组件：<Schedule></Schedule>你没有将孩子传递给它，只需将它与结束标签一起使用：<Schedule />

如果此答案不能解决您的问题，我们可能需要更多信息。

【讨论】：

对于这种情况，您可以将相关组件显示为一个整体，而不是完整的源代码。所以，那里有一个 Schedule 的默认导出，这意味着我的答案不是解决方案。 @Andrei Ghervan 可能是对的。尝试在您的 Schedule 组件中在 Helmet 上方放置一些东西并检查您是否可以看到它。

【解决方案2】：

您的组件没有显示，因为您没有在其中放置任何内容... Helmet 只是改变了页眉（标题等）。

尝试添加这个：

export class Schedule extends React.Component { // eslint-disable-line react/prefer-stateless-function
  render() {
    return (
      <div>
        <Helmet>
          <title>Schedule</title>hoera
          <meta name="description" content="Description of Schedule" />
        </Helmet>
        <div>Hello World</div>
      </div>
    );
  }
}

【讨论】：