组件的props

组件与组件之间是可以交互的，可以互相传递数据的。

我们可以通过props属性让父组件向子组件传递数据。

• 函数的组件的props

xxxxxxxxxx
return (
        <div>
            <Child title="baizhan"/>
        </div>
 )

xxxxxxxxxx
export default function Child(props) {
  return (
    <div>
        <h3>欢迎欢迎~ 热烈欢迎！</h3>
        <p>{ props.title }</p>
    </div>
  )
}

• class的组件的props

xxxxxxxxxx
render() {
    const info={title:'首页',desc:'这里是网站的首页，也是默认启动页面'}
    return (
        <div>
            <Child info={info}/>
        </div>
    )
}

xxxxxxxxxx
import React from 'react'

export default class Child extends React.Component {
  render() {
      const {title,desc}=this.props.info
    return <div>
          <h3>{ title }</h3>
          <p>{ desc }</p>
      </div>
  }
}

提示：

组件可以接受任意 props，包括基本数据类型，React 元素以及函数。

提示：

组件无论是使用函数声明还是通过 class 声明，都决不能修改自身的 props，props具有只读性。

实时效果反馈

1.下列关于组件的props描述错误的是：

A 使用props可以让父组件向子组件传递数据

B props可以在组件内随意更改

C 函数组件、类组件都有props属性

D 通过props可以传递任意类型的数据

答案

1=>B