React 中的用户自定义组件

Question

为什么“元素”定义看起来像 HTML 标记的东西，它调用的是 function。 为什么我不将元素设置为：Welcome('Sara')

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

const element = <Welcome name="Sara" />;

ReactDOM.render(
  element,
  document.getElementById('root')
);

Answer 1

类似于 HTML 的格式称为JSX ：

它是 JavaScript 的语法扩展。 我们建议将它与 React 一起使用来描述 UI 应该是什么样子

从技术上讲（在这个简单的例子中）你可以用Welcome({ name: 'Sara' })替换 JSX，但这不是在 React 中呈现组件的标准方式——它具有一些技术含义，因为它与使用 JSX（调用React.createElement ）。