69、React组件与Flow类型检查全解析

React组件与Flow类型检查全解析

1. React组件定义

在React中，定义新组件的最简单方式是编写一个函数，该函数将“props对象”作为参数，并返回一个JSX表达式。props对象是一个JavaScript对象，代表属性值，类似于传递给 createElement() 第二个参数的对象。

以下是 Sidebar 函数的示例：

function Sidebar(props) {
  return (
    <div>
      <h1>{props.title}</h1>
      { props.drawLine && <hr/> }
      <p>{props.content}</p>
    </div>
  );
}

这个新的 Sidebar 函数与之前的版本类似，但名称以大写字母开头，并且接受一个对象参数，而不是单独的参数。这使其成为一个React组件，意味着它可以在JSX表达式中替代HTML标签名使用：

let sidebar = <Sidebar title="Something snappy" content="Something wise"/>;

这个 <Sidebar/>