Question

我想了解下面的React代码; 具体来说，我假设了正在渲染这个组件，但是＆＃34;欢迎＆＃34;在上面的片段中指的是＆＃34;欢迎＆＃34;函数在顶部，并且rendinring通过3次迭代运行函数，每个名称一个

...

function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

function App() {
  return (
    <div>
      <Welcome name="Sara" />
      <Welcome name="Cahal" />
      <Welcome name="Edite" />
    </div>
  );
}

ReactDOM.render(
  <App />,
  document.getElementById('root')
);

Answer 1

这是 Composing Components 的示例。

组件可以引用其输出中的其他组件。

这意味着我们可以在组件内嵌套多个组件。这通常称为父/子组件。父组件可以呈现许多子组件。

在您发布的示例中，他们创建了一个名为<Welcome />的 functional stateless component 。 <App />组件是父组件，它需要呈现<Welcome />组件三次，每个组件具有不同的数据。他们使用 props 为每个<Welcome />组件传递不同的名称。

当调用<App />组件渲染方法时，它将分别渲染<Welcome />组件三次，每次都有自己的道具。

React组件的功能

1 个答案: