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') );
标签:render,传值子,React,props,组件,class,属性 From: https://www.cnblogs.com/LIXI-/p/16786900.html