赞助

组件间传值,在React中是通过只读属性 props 来完成数据传递的。

props:接受任意的入参,并返回用于描述页面展示内容的 React 元素。

function Cmp1(props) {

    return (

      <div>

        <h3>{ props.name } -- 你好世界</h3>

      </div>

    )

}

父组件

  
// react根组件
import React, { Component } from 'react'

// 导入
 import Items from './components/Items'
render() {
    return (
      <div>
        <Items title="我父组件给你的信息" num={100} bool={true} /> 
      </div>
    )
  }

子组件

import React from 'react';

// props是一个只读属性,不能进行数据修改const Items = (props) => {
  console.log(props)
  return (
    <div>
      我是一个函数组件
      <hr />
      <h3>{props.title}</h3>
    </div>
  );
} 

/* const Items = (props) => {
  let {title} = props
  return (
    <div>
      我是一个函数组件
      <hr />
      <h3>{title}</h3>
    </div>
  );
} */
export default Items;
 

 

posted on 2021-04-16 15:10  Tsunami黄嵩粟  阅读(476)  评论(0编辑  收藏  举报