组件化开发-01-函数父组件向子组件传值props——组件之间数据传递是单向数据流，也就是props是只读的

组件化开发-函数父组件向子组件传值props——组件之间数据传递是单向数据流，也就是props是只读的

组件接收数据props

• 父组件向子组件传递数据
  • props数据传递是单向数据流，不可以直接修改props传递过来的数据
  • props中数据是只读的

function Welcome (props) {
  console.log(props)
  return <h1 className='active'>欢迎[{props.uname}]访问</h1>
}

let uname = '王五';
<Welcome uname='lisi' age='123'/>
<Welcome uname='zhangsan' age='123'/>
<Welcome uname={uname} age='123'/>

实例：父组件向子组件传递数据

文件结构

第一步：src下新建文件夹components，下面新建01.js

/*
  函数父组件向子组件传值
*/
import React from 'react'

function Parent () {
  let data = 123
  return (
    <div>
      <div>父组件</div>
      <Child msg='nihao' info='hello' data={data}/>
    </div>
  )
}

function Child (props) {
  // 函数组觉得形参表示父组件传递过来的所有的属性
  // 组件之间数据传递是单向数据流，也就是props是只读的
  // props.msg = 123
  console.log(props)
  return (
    <div>子组件: {props.msg} {props.info} {props.data}</div>
  )
}

export default Parent

第二步：App.js中进行导入

import React from 'react';
import './App.css';
import Parent from './component/01-函数父组件向子组件传值'

function App () {
  return (
    <div>
      <Parent/>
    </div>
  )
}

export default App;

npm run start启动服务后，显示界面

打印结果