Comunicación del componente padre-hijo
// 导入
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;
Este código incluye un componente principal Appy un componente secundario Module, que realiza la comunicación entre los componentes principal e secundario.
En el componente principal App, useStateun estado se define usando defaultTodoe inicializado en defaultTodos. defaultTodoses ./components/module/contentDatauna lista de tareas pendientes predeterminada importada desde un archivo.
ApponToggleSe definen dos funciones de devolución de llamada en el componente onDelData, que se utilizan para cambiar el estado del elemento pendiente y eliminar el elemento pendiente respectivamente.
El componente secundario recibe Modulelos parámetros pasados por el componente principal id,,, y . En el componente secundario, use estos parámetros para mostrar el contenido y el estado de la tarea pendiente, y llame a la función de devolución de llamada pasada por el componente principal a través del evento de clic para modificar el estado o eliminar la tarea pendiente.donetextonToggleonDelData
En Appel componente, defaultTodo.mapse recorre la matriz defaultTodoy los datos de cada tarea pendiente Modulese representan como una propiedad del componente secundario.
El componente principal y el componente secundario se comunican a través de la función de devolución de llamada, y el componente secundario pasa los datos o la actualización del estado llamando a la función de devolución de llamada pasada por el componente principal. Al mismo tiempo, el componente principal useStategestiona los cambios de estado a través de y setDefaultTodoactualiza el estado llamando a funciones.
En términos de estilos CSS, los archivos import "./App.scss"se importan App.scssy spanse agregan diferentes efectos de estilo mediante representación condicional en los elementos de los subcomponentes.
En general, este código demuestra la comunicación entre los componentes padre e hijo en React a través de accesorios y funciones de devolución de llamada para realizar las funciones de visualización, cambio de estado y eliminación de la lista de tareas pendientes.
Pasar valor entre componentes hermanos
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;
Listar código de subcomponente:
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;
Del código del subcomponente:
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;
Este código incluye un componente principal Appy dos componentes secundarios Fromy Listrealiza la transferencia de valor entre componentes hermanos .
En el componente principal App, useStateun estado se define utilizando datae inicializa como una matriz de tres objetos. El componente principal también define una addListDatafunción denominada , que se utiliza para dataagregar nuevos datos a la matriz.
Los componentes principales pasan dataestados y addListDatafunciones a componentes y funciones secundarios como Fromaccesorios List. El componente secundario Fromrecibe addListDatala función y cuando ProFormel valor en el formulario cambia y se envía el formulario, addListDatase llama a la función para agregar el nuevo valor al dataestado del componente principal.
Los componentes secundarios Listreciben datacomo accesorios y utilizan los datos en Listla presentación de componentes de Ant Design.data
La transferencia de valor entre el componente principal y el componente secundario se realiza a través de accesorios. El componente principal pasa el estado y las funciones al componente secundario como accesorios. El componente secundario afecta el estado del componente principal llamando a la función pasada por el componente principal.
El propósito de toda la aplicación es permitir al usuario Fromingresar un dato a través del formulario en el componente y luego Listmostrar los datos ingresados a través del componente. El componente principal Appactúa como intermediario, pasando datos y funciones entre componentes hermanos.
Los subcomponentes pueden utilizar los datos o funciones pasados por el componente principal para lograr las funciones correspondientes de acuerdo con sus propias funciones y necesidades, y realizar la transferencia de valor y la interacción entre los componentes hermanos.
pasar valor entre componentes
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;
Subcomponente 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;
Subcomponente 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 es el componente descendiente:
GrandsonModule es un subcomponente del subcomponente 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;
Este código demuestra cómo utilizar Context para compartir datos entre componentes.
En Appel componente, primero se createContextcrea un objeto de contexto usando una función ThemeContext. Luego, use useStatepara definir un estado colorcon un valor inicial de "#bfc". El valor que actualizará setcolorla función color.
En editColoruna función, el valor setcolorque se actualiza llamando a la función color. Esta función TitleDatase llama en el componente secundario para actualizar el estado del componente principal.
En la declaración, coloque returnlos datos que deben compartirse en el atributo en . De esta manera, todos los componentes del paquete pueden acceder a estos datos compartidos. En este ejemplo, componentes secundarios y valores accesibles .color<ThemeContext.Provider>valueThemeContext.ProviderContentDataTitleDatacolor
Los subcomponentes ContentDatautilizan useContextganchos para suscribirse al ThemeContextcontexto y themevariables para obtener el valor de los datos compartidos color. En returnuna declaración, se muestra un fragmento de texto que contiene un valor theme.
El componente secundario GrandsonModuletambién usa useContextel gancho para obtener colorel valor y muestra themeun fragmento de texto que contiene el valor.
El componente secundario TitleDatarecibe la función pasada por el componente principal y llama a la función editColoren el caso del cuadro de entrada para actualizar el estado del componente principal.onChangeeditColor