3. React - 组件 和 props

1. 函数定义组件

// myComponent.js
import React from 'react';
function MyCompoennt (props) {  // props 为组件属性传入的参数
    return <h1>{props.name} :  我的第一个函数定义的组件</h1>          
}
export default MyCompoennt;

---

// 在其他js 中使用该组件  index.js
ReactDOM.render(
  <MyComponent name="张三" />,    // name 对应组件中的 props.name
  document.getElementById('root')
)

2. ES6  class 定义组件

// myComponent.js

//  ES6 class 定义组件
import React from 'react';
class MyComponent extends React.Component {
    render() {
        return <h1> 我的第一个CLASS定义的组件 { this.props.name } </h1>
    }
}
export default MyCompoennt;



// 在其他js 中使用该组件  index.js

ReactDOM.render(
  <MyComponent name="张三" />,    // name 对应组件中的 props.name
  document.getElementById('root')
)

3. 组件的总结

　　1. 定义组件时首字母必须大写

　　2. 组件也可以作为  React 元素  ： const element = <Welcome name="Sara" />

　　3. props: 组件使用时传入的属性对象

　　4. 组件无论是使用 函数声明还是通过 class 声明，都决不能修改自身的 props

　　5. 组件可以嵌套：https://react.docschina.org/docs/components-and-props.html