React组件简单渲染

Question

我是新来的回应者，并遵循以下教程https://facebook.github.io/react/docs/components-and-props.html

我有下面的代码。 我不明白为什么它不渲染内容。

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

function App(props) {
  return (
    <div>
      <Welcome surname = {props.surname} />
      <Welcome surname = {props.surname} />
      <Welcome surname = {props.surname} />
    </div>
  );
}

function myApp(){
  return (
    <div>
      <App surname = "Simon" />
    </div>
  );
}

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

我正在遵循类似的示例： https : //codepen.io/gaearon/pen/KgQKPr?editors=0010

我唯一不同的是在顶部添加一个不同的组件并更改了道具数据。

如果我缺少任何东西，请告诉我。

Answer 1

react组件的首字母应为大写。 因此，将您的myApp转换为MyApp

function MyApp(){
  return (
    <div>
      <App surname = "Simon" />
    </div>
  );
}

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