4.react basic props父子传值、props传children jsx标签 、component子传父 、 兄弟组件传值

1.props 父子通讯 ， 父传子

注意：

1. 父组件中通过属性值向子组件传递参数

2. 子组件通过函数的形参props对象中获取

import { useState } from 'react';
// 1.父组件中通过属性值向子组件传递参数
// 2.子组件通过函数的形参props对象中获取
function Son (props) { 
  return <div>
    <div>只读的props对象，不能直接修改，只能通过useState的set去修改</div>
    <div>我是子组件:{props.count}</div>
    <div>jsx : {props.jsx}</div>
    <button onClick={props.addcb}>子组件点击count++</button>
  </div>
 }
function App () {
  const [count, setCount] = useState(0)
  const handleCountAdd = () => {
    setCount(count + 1)
  }
  return (
    <div className="App">
      <div>父组件数据：count：{ count }</div>
      <div>子组件：</div>
      <Son
        count={count}
        list={[1, 3, 5]}
        addcb={() => setCount(count + 1)}
        jsx={ <span>我是一个jsx标签</span> }
      ></Son>
      <button onClick={handleCountAdd}>点击count+1</button>
    </div>
  );
}

2.子组件使用嵌套标签 传递children

function Son (props) {
  console.log(props)
  // props.children 就是父组件传的span标签
  return <div>这是子组件{ props.children }</div>
}
function App () {

  return (
    <div className="App">
      {/* 当内容嵌套时，父组件会自动在名为children的prop属性中接收到该内容 */}
      <Son>
        <span>我是children标签</span>
      </Son>
    </div>
  );
}

 3.父子通讯，子传父

父组件通过事件通道（onGetMessage）传递父组件中的 onGetMessage ，子组件用过事件通道向父组件传入实参

import { useState } from 'react';
// 子传父操作,子组件调用父组件方法
function Son (props) {
  console.log(props)
  return <div>这是子组件
    <button onClick={()=>props.onGetMessage('我是新的内容')}>点击修改父组件内容</button>
  </div>
}
function App () {
const [message,setMessage]=useState('初始值')
  const onGetMessage = (msg) => {
    console.log('msg',msg)
    setMessage(msg)
  }
  return (
    <div className="App">
      <div>message:{message }</div>
      <Son onGetMessage={ onGetMessage }>
      </Son>
    </div>
  );
}

4.组件通讯，兄弟组件传递

通过共同的父组件 进行中转操作达到传递信息的目的

import { useState } from 'react';
// 兄弟组件的通信
function SonA (props) {
  return <div>这是SonA
    <button onClick={()=>props.onGetMessage('我是新的内容')}>点击发送内容到SonB</button>
  </div>
}
function SonB (props) {
  return <div>这是SonB:  <span style={{color:'red'}}>{ props.message}</span>
  </div>
}

function App () {
const [message,setMessage]=useState('初始值')
  const onGetMessage = (msg) => {
    console.log('msg',msg)
    setMessage(msg)
  }
  return (
    <div className="App">
      <div>message:{message }</div>
      <SonA onGetMessage={ onGetMessage }></SonA>
      <SonB message={message }></SonB>
    </div>
  );
}

5.createContext 创建上下文进行顶层传递，子代组件均可获取数据

import { createContext, useContext, useState } from 'react';
// 1.createContext 方法创建上下文对象
const MessageContext = createContext()
// 2.顶层组件通过MessageContext.provider组件的value提供数据
// 3.底层组件用错useContext钩子函数使用传递的数据
// 嵌套组件的传值
function Son ({ onGetMessage }) {
  return <div>
    <div>这是Son组件 
      <button onClick={()=>onGetMessage('修改文本')}>点击修改内容</button>
    </div>
    <GrandSon />
  </div>
}
function GrandSon () {
  const msg = useContext(MessageContext)
   return <div>这是孙子组件:  <span style={{color:'red'}}>{msg }</span>
   </div>
}
function App () {
  const [message,setMessage]=useState('初始值')
  const onGetMessage = (msg) => {
    console.log('msg',msg)
    setMessage(msg)
  }
  return (
    <div className="App">
      <div>顶层组件:{message}</div>
      <MessageContext.Provider value={message}>
         <Son onGetMessage={onGetMessage}></Son>
      </MessageContext.Provider>
    </div>
  );
}