javascript - 当一个 URL 有参数的时候，为什么我们要把子组件放在一个属性里面

Question

我目前正在观看有关 React 的教程。

1. 为什么我们把属性放在<Person />里面而不是放在中间？children<Route></Route>
2. 为什么是<Person />包裹在{}. 我认为{}jsx 表达式的内部表示其中的所有内容都是 javascript 表达式。但<Person />不是javascript表达式吗？

标签： javascriptreactjsreact-nativereact-routerfrontend

Answer 1

1. 为什么我们将<Person />children 属性放在里面而不是在 之间<Route></Route>？

它们是children在反应组件中使用的两种方式。我不确定导师为什么同时使用它们。也许他/她只是向您展示了 2 种使用children.

2. 为什么<Person />在 {} 之间包裹。我认为 jsx 表达式中的 {} 表示其中的所有内容都是 javascript 表达式。但不是javascript表达式吗？

Route有一个道具children，它接收一个功能组件Person，所以你应该用{}. 在这里阅读文档。

const Person = () => {
  return <p>Person</p>;
};

const App = () => {
  return (
    <BrowserRouter>
      <Switch>
        <Route exact path="/" children={<Person />} />

       {/* You can rewrite it as below */}

        <Route exact path="/" children={() => { return <p>Person</p>; }} />
      </Switch>
    </BrowserRouter>
  );
};

密码箱