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>; }

原文：https://juejin.cn/post/7481992008673558555