react 组件中的 props

Posted 2021-12-23 冰雪奇缘lb

组件的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 !