React Props

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

 

1、定义和使用props 传值

• 通过React类定义组件时：
• 在父组件render 方法中调用组件时使用key/value 的形式来指定属性。
• 在自定义子组件中通过this.props.key 来获得组件属性的值，需要使用{}括起来。

举例：

导入文件：

import App3 from "./App3.jsx"

使用组件：

 <App3 name={"hello"}></App3>

 

组件文件：

import React, { Component } from 'react'

export default class extends Component {

  render() {

    return (

      <div>

        <div>App3组件</div>

        <div>{this.props.name}</div>

      </div>

    )

  }

}

 

2、多属性传值

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

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