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>;
}
相关推荐
潘多编程10 分钟前
构建企业级Web应用:AWS全栈架构深度解析
前端·架构·aws
裕波14 分钟前
Vue 与 Vite 生态最新进展:迈向一体化与智能化的未来
前端·vue.js
destinying31 分钟前
当部分请求失败时,前端如何保证用户体验不崩溃?
前端·javascript·程序员
幼儿园技术家37 分钟前
Diff算法的简单介绍
前端
陈随易37 分钟前
为VSCode扩展开发量身打造的UI库 - vscode-elements
前端·后端·程序员
叁金Coder41 分钟前
业务系统跳转Nacos免登录方案实践
前端·javascript·nginx·nacos
蓝倾41 分钟前
京东商品销量数据如何获取?API接口调用操作详解
前端·api·fastapi
stoneship41 分钟前
满帮微前端
前端
GKDf1sh43 分钟前
【前端安全】聊聊 HTML 闭合优先级和浏览器解析顺序
前端·安全·html
前端老鹰44 分钟前
HTML <dialog> 元素:原生弹窗解决方案,无需再写复杂遮罩
前端·html