react 组件中的 props

组件的props

• 组件是封闭的，要接收外部数据应该通过 props 来实现
• props 的作用：接收传递给组件的数据
• 传递数据：给组件标签添加属性
• 接收数据︰函数组件通过 参数props
• 接收数据，类组件通过 this.props 接收数据

函数组件传值方式

// props
const Hello = (props) => {
    // props 是一个对象
    const { name, age } = props
    return(
        <div>
            <h1>姓名: {name}</h1>
            <h1>年龄: {age}</h1>
        </div>
    )
}
// 渲染组件
ReactDOM.render(<Hello name="jack" age={19} />, document.getElementById("root"))

类组件传值方式

class Hello extends React.Component {
    render() {
        const {name, age, fn, tag} = this.props
        fn()
        
        return(
            <div>
                <h1>姓名： {name}</h1>
                <h1>年龄： {age}</h1>
                {tag}
            </div>
        )
    }
}
// 渲染组件
ReactDOM.render(<Hello 
	name="jack" 
	age={19} 
	colors={['red', 'green', 'blue']}
	fn={() => console.log('这是一个函数')}
	tag={<p>这是一个 p 标签</p>}
/>,
	 document.getElementById("root")
)

注意：

1. 组件传值字符串类型需要加引号，其他类型需要加{ }
2. 可以给组件传递任意类型的数据
3. props 是 只读 的对象，只能读取属性的值，无法修改对象
4. 注意∶使用类组件时，如果写了构造函数，应该将 props 传递给 super()，否则，无法在构造函数中获取到props !