React：Props属性（父组件传值子组件）

React 的一大特点是单向数据流。React 中的每一个组件，都包含有一个属性（props），属性主要是从父组件传递给子组件的，在组件内部，我们可以通过this.props获取属性对象。

1、定义和使用props 传值

• 通过React类定义组件时：

  • 在父组件render 方法中调用组件时使用key/value 的形式来指定属性。

  • 在自定义子组件中通过this.props.key 来获得组件属性的值，需要使用{}括起来。

// 类定义组件时，使用属性 this.props.属性名称
class MyApp extends React.Component {
    render() {
        return (<p>{this.props.name}</p>);
    }
}
​
ReactDOM.render(
    <MyApp name="张三" />, 
    document.getElementById('root')
);

 

• 通过React函数定义 组件时：

  • 在父组件render 方法中调用组件时使用key/value 的形式来指定属性。

  • 在自定义子组件中通过函数接收参数props，props.key来获得组件属性的值，需要使用{}括起来

// 函数定义组件时，在组件内部使用属性值：props.属性名称
function Welcome(props) { // 函数需要传递一个参数props
    return(<h2>{props.title}</h2>)
}
​
ReactDOM.render(
    <Welcome title="张三" />, 
    document.getElementById('root')
);

 

2、默认Props

• 定义默认props：

class MyApp extends React.Component {
    render() {
        return <p>this is my {this.props.name}</p>
    }   
}
//由于是用ES6 class语法创建组件，其内部只允许定义方法，而不能定义属性，class的属性只能定义在class之外。所以defaultProps要写在组件外部。
MyApp.defaultProps = {
    name: 'xxx'
};
    
​
ReactDOM.render(
    <MyApp />,
    document.getElementById('root')
);
 

 

3、多属性传值

（1）定义一个this.props对象，在对象中声明多个键值对，用于表示组件的属性

（2）在组件中使用{...this.props}的方式传递属性。“...”表示JSX的延展操作符，这种方式可以很方便的为组件指定多个属性，并且为属性的值指定数据类型。

class MyApp extends React.Component {
    render() {
        return(
            <h1>{this.props.name} : {this.props.age} : {this.props.sex}</h1>
        );
    }
}
​
​
​
​
let p1 = {
    name: '张三', 
    age: 18,
    sex: '男'
};
​
ReactDOM.render(
    //<MyApp name='张三' age='18' sex='男' />
    <MyApp {...p1}/>,
    document.getElementById('root')
);