Question

我试图在我的应用程序中使用ReactRouter，如下所示：

const App = () => (
  <BrowserRouter>
    <div>
      <Match exactly pattern="/" render={() => (
        <Redirect to="/dashboard" />
      )} />
      <Match exactly pattern="/dashboard" render={() => (
        <DashboardPage content={Main} />
      )} />
    </div>
  </BrowserRouter>
);

const DashboardPage = ({ content }) => (
  <div>
    <main>
      {content}
    </main>
  </div>
);

const Main = () => (
  <div>
    <h2>Hello World</h2>
  </div>
);

不幸的是，Main组件没有被渲染。呈现它的唯一方法是<DashboardPage content={<Main />} />，而<Match exactly pattern="/dashboard" component={Main} />可以正常工作。

Answer 1

我打算把它作为评论，但它需要格式化，所以它才能成为答案;

JSX只是围绕javascript的一组语法。你还在编写javascript，javascript的所有规则仍然适用。

Main是一个功能。如果键入函数名称，结果将是函数定义。但是为了让react类创建一个组件，你需要实际执行该函数，而不仅仅是输出它的定义。

与console.log与console.log()相同。在控制台中键入每个并查看差异。第一个返回一个函数，第二个返回该函数的返回值。对于react组件，HTML结果是函数的返回值。

在我看来，修改代码的最佳方法如下：

const DashboardPage = ({ Content }) => (
  <div>
    <main>
      <Content />
    </main>
  </div>

);

在设置Content的道具时，务必大写DashboardPage。

ReactRouter传递组件名称

1 个答案: