父子組件通信
// 導入
import { useState } from "react";
import "./App.scss";
import { defaultTodos } from "./components/module/contentData";
// 子組件
const Module = ({ id, done, text, onToggle, onDelData }) => {
return (
<div>
<span className={done ? "" : "text"} onClick={() => onToggle(id)}>
-- {text} --
</span>
{/* 點擊后子組件調(diào)用父組件函數(shù)，將 id 回傳給父組件 */}
<button onClick={() => onDelData(id)}>刪除</button>
</div>
);
};
// 父組件
const App = () => {
// 狀態(tài)
const [defaultTodo, setDefaultTodo] = useState(defaultTodos);
// 修改文字狀態(tài)
const onToggle = (id) => {
setDefaultTodo(
defaultTodo.map((item) => {
if (item.id === id) return { ...item, done: !item.done };
return item;
})
);
console.log(defaultTodo);
};
// 刪除
const onDelData = (xId) => {
const dataId = defaultTodo.filter((item) => item.id !== parseInt(xId));
console.log(xId, "點擊了刪除", dataId);
setDefaultTodo(dataId);
};
return (
<div>
<p>xxx </p>
{defaultTodo.map((item) => {
// key 可以直接用
// return <Module key={item.id} done={item.done} text={item.text}></Module>;
// {...item} 解構(gòu)寫法，簡化開發(fā)
// onToggle 給子組件調(diào)用的函數(shù)
return (
<Module
key={item.id}
{...item}
onToggle={onToggle}
onDelData={onDelData}
></Module>
);
})}
</div>
);
};
export default App;
這段代碼包括一個父組件App和一個子組件Module，實現(xiàn)了父子組件之間的通信。
在父組件App中，使用useState來定義了一個狀態(tài)defaultTodo，并初始化為defaultTodos。defaultTodos是從./components/module/contentData文件中導入的一個默認的待辦事項列表。
App組件中定義了兩個回調(diào)函數(shù)onToggle和onDelData，分別用于切換待辦事項的狀態(tài)和刪除待辦事項。
子組件Module接收父組件傳遞的參數(shù)id、done、text、onToggle和onDelData。在子組件中，使用這些參數(shù)來展示待辦事項的內(nèi)容和狀態(tài)，并通過點擊事件調(diào)用父組件傳遞的回調(diào)函數(shù)來修改狀態(tài)或刪除待辦事項。
在App組件中，通過defaultTodo.map遍歷defaultTodo數(shù)組，并將每個待辦事項的數(shù)據(jù)作為子組件Module的屬性進行渲染。
父組件和子組件之間通過回調(diào)函數(shù)的方式進行通信，子組件通過調(diào)用父組件傳遞的回調(diào)函數(shù)來傳遞數(shù)據(jù)或狀態(tài)的更新。同時，父組件通過useState來管理狀態(tài)的變化，并通過調(diào)用setDefaultTodo函數(shù)來更新狀態(tài)。
在CSS樣式方面，通過import "./App.scss"導入了App.scss文件，并在子組件的span元素中通過條件渲染添加了不同的樣式效果。
總的來說，這段代碼演示了React中父子組件之間通過props和回調(diào)函數(shù)進行通信，實現(xiàn)待辦事項列表的展示、狀態(tài)切換和刪除功能。
兄弟組件之間的傳值
import { useState } from "react";
import "./App.scss";
import From from "./components/ContentData";
import List from "./components/TitleData";
// 利用轉(zhuǎn)態(tài)提升來讓兄弟組件之間可以傳值
function App() {
const [data, setData] = useState([
{ id: 1, name: "李白", age: 19 },
{ id: 2, name: "杜甫", age: 29 },
{ id: 3, name: "白居易", age: 30 },
]);
const addListData = (newData) => {
console.log("執(zhí)行了");
setData([...data, { id: Date.now(), name: newData, age: 119 }]);
};
return (
<div>
<From data={data}></From>
<hr />
<List addListData={addListData}></List>
</div>
);
}
export default App;
List 子組件代碼：
import { List } from "antd";
const ListData = ({ data }) => {
return (
<div>
<List
size="large"
header={<div>唐</div>}
footer={<div>宋</div>}
bordered
dataSource={data}
renderItem={(item) => <List.Item>{item.name}</List.Item>}
/>
</div>
);
};
export default ListData;
From 子組件代碼：
import { ProForm, ProFormText } from "@ant-design/pro-components";
import "./index.css";
const From = ({ addListData }) => {
return (
<div className="box-form">
<ProForm
onFinish={async (values) => {
console.log(values);
addListData(values.name);
}}
>
<ProFormText name="name" label="姓名" />
</ProForm>
</div>
);
};
export default From;
這段代碼包括一個父組件App和兩個子組件From和List，實現(xiàn)了兄弟組件之間的值傳遞。
在父組件App中，使用useState定義了一個狀態(tài)data，并初始化為一個包含三個對象的數(shù)組。父組件還定義了一個名為addListData的函數(shù)，用于向data數(shù)組中添加新的數(shù)據(jù)。
父組件通過將data狀態(tài)和addListData函數(shù)作為props傳遞給子組件From和List。子組件From接收addListData函數(shù)，當ProForm表單中的值發(fā)生變化且提交表單時，調(diào)用addListData函數(shù)將新的值添加到父組件的data狀態(tài)中。
子組件List接收data作為props，并使用Ant Design的List組件展示data中的數(shù)據(jù)。
父組件和子組件之間的值傳遞通過props來完成，父組件將狀態(tài)和函數(shù)傳遞給子組件作為props，子組件通過調(diào)用父組件傳遞的函數(shù)來影響父組件的狀態(tài)。
整個應用的目的是讓用戶通過From組件中的表單輸入一條數(shù)據(jù)，然后通過List組件展示已經(jīng)輸入的數(shù)據(jù)。父組件App作為中介，在兄弟組件之間傳遞數(shù)據(jù)和函數(shù)。
子組件可以根據(jù)自己的功能和需要使用父組件傳遞的數(shù)據(jù)或函數(shù)來實現(xiàn)相應的功能，實現(xiàn)了兄弟組件之間的值傳遞和交互。
跨組件傳值
import { createContext, useState } from "react";
import ContentData from "./components/ContentData";
import TitleData from "./components/TitleData";
export const ThemeContext = createContext();
const App = () => {
const [color, setcolor] = useState("#bfc");
// 無視組件層級關系，跨組件通信
const editColor = (e) => {
console.log("觸發(fā)");
setcolor(e);
};
return (
<div>
{/* 共享數(shù)據(jù) */}
<ThemeContext.Provider value={color}>
<p>123</p>
<ContentData></ContentData>
<hr />
<TitleData editColor={editColor}></TitleData>
</ThemeContext.Provider>
</div>
);
};
export default App;
TitleData 子組件：
const TitleData = ({ editColor }) => {
const triggeredChange = (e) => {
console.log(e.nativeEvent.srcElement.value);
editColor(e.nativeEvent.srcElement.value);
};
return (
<div className="box-form">
子組件：<p>TitleData</p>
<input type="color" onChange={(e) => triggeredChange(e)} />
</div>
);
};
export default TitleData;
ContentData 子組件：
import { useContext } from "react";
import GrandsonModule from "./components/grandsonModule";
import { ThemeContext } from "../../App";
const ContentData = ({ data }) => {
const theme = useContext(ThemeContext);
return (
<div>
子組件：<p style={{ color: theme }}>ContentData {theme}</p>
<GrandsonModule></GrandsonModule>
</div>
);
};
export default ContentData;
GrandsonModule 是子孫組件：
GrandsonModule 是 ContentData 子組件的子組件
import { useContext } from "react";
import { ThemeContext } from "../../../App";
const GrandsonModule = () => {
const theme = useContext(ThemeContext);
return (
<div>
子孫組件：<p>GrandsonModule {theme}</p>
</div>
);
};
export default GrandsonModule;
這段代碼它演示了如何使用上下文（Context）在跨組件之間共享數(shù)據(jù)。
在App組件中，首先使用createContext函數(shù)創(chuàng)建了一個上下文對象ThemeContext。然后，使用useState來定義一個狀態(tài)color，初始值為"#bfc"。通過setcolor函數(shù)來更新color的值。
在editColor函數(shù)中，通過調(diào)用setcolor函數(shù)來更新color的值。該函數(shù)在子組件TitleData中被調(diào)用，用于更新父組件的狀態(tài)。
在return語句中，將需要共享的數(shù)據(jù)color放在<ThemeContext.Provider>中的value屬性中。這樣，ThemeContext.Provider包裹的所有組件都可以訪問這個共享的數(shù)據(jù)。在這個例子中，子組件ContentData和TitleData可以訪問color的值。
子組件ContentData使用useContext鉤子來訂閱ThemeContext上下文，并使用theme變量來獲取共享的數(shù)據(jù)color的值。在return語句中，展示了包含theme值的一段文字。
子組件GrandsonModule也使用了useContext鉤子來獲取color的值，并展示了包含theme值的一段文字。文章來源：http://www.zghlxwxcb.cn/news/detail-615101.html
子組件TitleData接收父組件傳遞的editColor函數(shù)，并在輸入框的onChange事件中調(diào)用editColor函數(shù)來更新父組件的狀態(tài)文章來源地址http://www.zghlxwxcb.cn/news/detail-615101.html
到了這里，關于React 組件通信-全面解析的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關文章，希望大家以后多多支持TOY模板網(wǎng)！
