react通讯 - 技术栈

createContext解决了什么问题?

你需要把一个 prop层层传递给深层嵌套的子组件时, 就可以用createContex

js 复制代码

const ThemeContext = createContext('light')

function App() {
    return (
        <ThemeContext.Provider value='dark'>
            <ToolBar/>
        </ThemeContext.Provider>
    )
}

function ToolBar() {
    return <Button/>
}

function Button() {
    const theme = useContext(ThemeContext)
    return <button>{theme}</button>
}

点击组件A, 修改组件b的颜色

js 复制代码

import React, { useState, createContext, useContext, Children } from "react";
import "./App.css";

const colorContext = createContext();
function Color({ children }) {
  const [color, setColor] = useState("pink");
  return (
    <colorContext.Provider value={{color, setColor}}>
      {children}
    </colorContext.Provider>
  );
}

function Txt() {
  const { color } = useContext(colorContext);
  return <div style={{ color }}>颜色{color}</div>;
}

function Btn() {
  const { setColor } = useContext(colorContext);
  return <>
    <button onClick={() => setColor('red')} >红色</button>
    <button onClick={() => setColor('blue')} >蓝色</button>
  </>
}

function App() {
  return (
    <Color>
      <Txt />
      <Btn />
    </Color>
  );
}

export default App;

React父组件如何与子组件通信?

父组件通过props向子组件传递数据和函数。子组件可以通过props获取到这些数据和函数。

子组件如何改变父组件的状态?

js 复制代码

import React, { useState } from 'react';

function Parent() {
  const [count, setCount] = useState(0);
  const handleIncrement = () => {
    setCount(prevCount => prevCount + 1);
  }
  
  return (
    <div>
      <p>Count: {count}</p>
      <Child onIncrement={handleIncrement} />
    </div>
  )
}

function Child({ onIncrement }) {
  return <button onClick={onIncrement}>Increment</button>;
}