親子コンポーネントの通信
// 导入
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>
{
/* 点击后子组件调用父组件函数，将 id 回传给父组件 */}
<button onClick={
() => onDelData(id)}>删除</button>
</div>
);
};
// 父组件
const App = () => {
// 状态
const [defaultTodo, setDefaultTodo] = useState(defaultTodos);
// 修改文字状态
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} 解构写法，简化开发
// onToggle 给子组件调用的函数
return (
<Module
key={
item.id}
{
...item}
onToggle={
onToggle}
onDelData={
onDelData}
></Module>
);
})}
</div>
);
};
export default App;
このコードには親コンポーネントAppと子コンポーネントが含まれておりModule、親コンポーネントと子コンポーネント間の通信を実現します。
親コンポーネントではApp、useState状態は を使用して定義されdefaultTodo、 に初期化されますdefaultTodos。ファイルからインポートされたデフォルトの Todo リストdefaultTodosです。./components/module/contentData
Appコンポーネント には2 つのコールバック関数onToggleと が定義されてonDelDataおり、それぞれ To Do 項目の状態を切り替えたり、To Do 項目を削除したりするために使用されます。
子コンポーネントは、親コンポーネント、、、およびModuleによって渡されたパラメータを受け取ります。子コンポーネントでは、これらのパラメータを使用して To Do 項目の内容とステータスを表示し、クリック イベントを通じて親コンポーネントから渡されるコールバック関数を呼び出して、ステータスを変更するか To Do 項目を削除します。iddonetextonToggleonDelData
Appコンポーネントでは、配列defaultTodo.mapが走査されdefaultTodo、各 ToDo 項目のデータがModule子コンポーネントのプロパティとしてレンダリングされます。
親コンポーネントと子コンポーネントはコールバック関数を通じて通信し、子コンポーネントは親コンポーネントから渡されたコールバック関数を呼び出すことでデータまたは状態の更新を渡します。同時に、親コンポーネントはuseStateを介して状態の変更を管理し、setDefaultTodo関数を呼び出して状態を更新します。
CSS スタイルに関しては、ファイルimport "./App.scss"がインポートされApp.scss、spanサブコンポーネントの要素の条件付きレンダリングを通じてさまざまなスタイル効果が追加されます。
一般に、このコードは、ToDo リストの表示、状態切り替え、削除機能を実現するための props 関数とコールバック関数を介した React の親コンポーネントと子コンポーネント間の通信を示します。
兄弟コンポーネント間で値を渡す
import {
useState } from "react";
import "./App.scss";
import From from "./components/ContentData";
import List from "./components/TitleData";
// 利用转态提升来让兄弟组件之间可以传值
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("执行了");
setData([...data, {
id: Date.now(), name: newData, age: 119 }]);
};
return (
<div>
<From data={
data}></From>
<hr />
<List addListData={
addListData}></List>
</div>
);
}
export default App;
サブコンポーネントコードをリストします:
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;
サブコンポーネントコードから:
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;
このコードには 1 つの親コンポーネントAppと 2 つの子コンポーネントが含まれておりFrom、兄弟コンポーネント間の値の転送Listを実現します。
親コンポーネント ではApp、useState状態はdata3 つのオブジェクトの配列を使用して定義され、初期化されます。親コンポーネントは、配列に新しいデータを追加するaddListDataために使用される という名前の関数も定義します。data
親コンポーネントは、data状態と関数をpropsaddListDataとして子コンポーネントと関数に渡します。子コンポーネントは関数を受け取り、フォーム内の値が変更されてフォームが送信されると、関数が呼び出されて新しい値が親コンポーネントの状態に追加されます。FromListFromaddListDataProFormaddListDatadata
子コンポーネントはprops としてList受け取り、Ant Design のコンポーネント プレゼンテーションでデータを使用します。dataListdata
親コンポーネントと子コンポーネント間の値の転送は、props を通じて行われます。親コンポーネントは、状態と関数を props として子コンポーネントに渡します。子コンポーネントは、親コンポーネントによって渡された関数を呼び出すことによって、親コンポーネントの状態に影響を与えます。
アプリケーション全体の目的は、ユーザーがFromコンポーネントのフォームを通じてデータを入力し、List入力されたデータをコンポーネントを通じて表示できるようにすることです。親コンポーネントはApp仲介者として機能し、兄弟コンポーネント間でデータと関数を渡します。
サブコンポーネントは、親コンポーネントによって渡されたデータまたは関数を使用して、独自の機能とニーズに応じて対応する機能を実現し、兄弟コンポーネント間の値の転送と対話を実現できます。
コンポーネント間で値を渡す
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("触发");
setcolor(e);
};
return (
<div>
{
/* 共享数据 */}
<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 を使用してコンポーネント間でデータを共有する方法を示しています。
Appコンポーネントでは、まずcreateContext関数を使用してコンテキスト オブジェクトが作成されますThemeContext。次に、 を使用して、初期値 のuseState状態を定義します。関数によって更新される値。color"#bfc"setcolorcolor
editColor関数において、setcolor関数を呼び出すことによって更新される値color。この関数は、TitleData親コンポーネントの状態を更新するために子コンポーネントで呼び出されます。
ステートメントでは、 の属性にreturn共有する必要があるデータをcolor入力します。これにより、パッケージのすべてのコンポーネントがこの共有データにアクセスできるようになります。この例では、子コンポーネントとアクセス可能な値。<ThemeContext.Provider>valueThemeContext.ProviderContentDataTitleDatacolor
サブコンポーネントはフックContentDataを使用してコンテキストと変数useContextをサブスクライブし、共有データの値を取得します。ステートメントでは、値を含むテキストが表示されます。ThemeContextthemecolorreturntheme
子コンポーネントGrandsonModuleもuseContextフックを使用してcolor値を取得し、theme値を含むテキストを表示します。
子コンポーネントはTitleData親コンポーネントから渡された関数を受け取り、editColor入力ボックスのイベントでその関数onChangeを呼び出してeditColor親コンポーネントの状態を更新します。