React中props传递数据

组件的props

• 要接收组件外部的数据可以通过props来实现
• props用来接收传递给组建的数据
• 数据的传递可以用给组件标签添加属性的方式
• 接收数据：函数组件可以通过参数props来接收数据，类组件可以通过this.props接收数据，

实例：
类组件传递数据：

class Hello extends React.Component {
    render() {
    console.log(this.props);
        return (
            <div>
                <div>接收到的数据：{this.props.name}</div>
                <div>接收到的数据：{this.props.age}</div>
            </div>
        )
    }
}

ReactDOM.render(<Hello name="123" age={19} />, document.querySelector('#root'))

函数组件传递数据：

function Hello(props) {
    console.log(props);
    return (
        <div>
            <div>接收到的数据：{props.name}</div>
            <div>接收到的数据：{props.age}</div>
        </div>
    )
}

ReactDOM.render(<Hello name="123" age={19} />, document.querySelector('#root'))

运行以上代码结果如下：

运行以上代码控制台打印结果如下：