Question

我分叉了这个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

Answer 1

你不是因为这个错误吗？您的Schedule组件是命名导出而不是默认值。所以你需要将其导入为：

import { Schedule } from "containers/Schedule";

或者不给它起名称，只需导出为默认值：

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

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

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

Answer 2

您的组件未显示，因为您未在其中添加任何内容... 头盔只是在改变页面标题（标题等）。

尝试添加此内容：

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>
    );
  }
}

在React应用程序中添加容器的位置？

2 个答案: