Props

组件从概念上看就像是函数，它可以接收任意的输入值（称之为“props”），并返回一个需要在页面上展示的React元素。 1、组件定义的两种方式 1.1 函数定义组件 定义一个组件最简单的方式是使用JavaScript函数： function Welcome(props) { return <h1>Hello, {props.name}</h1>; } 该函数是一个有效的React组件，它接收一个单一的“props”对象并返回了一个React元素。我们之所以称这种类型的组件为函数定义组件，是因为从字面上来看，它就是一个JavaScript函数。 1.2 ES6 class 来定义组件 class Welcome extends React.Component { render() { return <h1>Hello, {this.props.name}</h1>; } } 2、组件渲染 React元素也可以是用户自定义的组件。当React遇到的元素是用户自定义的组件，它会将JSX属性作为单个对象传递给该组件,这个对象称之为“props”。 function Welcome(props) { return <h1>Hello, {props.name}</h1>; } const element = <Welcome name="Sara" />; ReactDOM.render(