屬性傳參
父?jìng)髯? 父組件使用屬性傳遞, 子組件使用形參接收
子傳父: 父組件傳給子組件一個(gè)方法, 子組件去觸發(fā)這個(gè)方法
Parent.js
import React, { useState } from 'react';
import Child from './Child';
export default function Parent() {
const [count, setCount] = useState(99);
return (
<div className="text-2xl">
<div>父組件</div>
<button onClick={() => setCount(count + 1)}>加一</button>
<hr />
<Child count={count} onSubtraction={() => setCount(count - 1)}></Child>
</div>
);
}
Child.js
import React from 'react';
export default function Child(props) {
return (
<div>
子組件:
<div>
<button onClick={() => props.onSubtraction()}>減一</button>
</div>
<div>{props.count}</div>
</div>
);
}
React.createContext方法傳參
父子組件和非父子組件都可以使用該方法進(jìn)行傳; 在父組件中使用Provider分發(fā)數(shù)據(jù), 在子組件中使用useContent方法獲取數(shù)據(jù)
Parent.js
import React, { useState } from "react";
import Child from "./Child";
export const Counter = React.createContext();
const Parent = () => {
const [userInfo, setUserInfo] = useState({
age: 20,
sex: "man"
});
return (
<Counter.Provider value={userInfo}>
<div style={{ background: "skyblue" }}>
<div>父組件</div>
<button
onClick={() => setUserInfo({ ...userInfo, age: userInfo.age + 1 })}
>
年齡+1
</button>
<button
onClick={() => setUserInfo({ ...userInfo, age: userInfo.age - 1 })}
>
年齡-1
</button>
</div>
<Child />
</Counter.Provider>
);
};
export default Parent;
Child.js
import { useContext } from "react";
import { Counter } from "./Parent";
import Son from "./Son";
export default function () {
const counter = useContext(Counter);
return (
<div style={{ background: "#2da" }}>
<div>子組件</div>
<div>性別: {counter.sex}</div>
<div>年齡: {counter.age}</div>
<Son />
</div>
);
}
Son.js
import { useContext } from "react";
import { Counter } from "./Parent";
export default function () {
const counter = useContext(Counter);
return (
<div style={{ background: "#1ff" }}>
<div>孫組件</div>
<div>性別: {counter.sex}</div>
<div>年齡: {counter.age}</div>
</div>
);
}
使用第三方插件
本文使用兩種插件, pubsub-js 和 redux, 這兩種方法傳參父子組件和非父子組件都可以使用
- PubSubJS是一個(gè)用 JavaScript 編寫(xiě)的基于主題的 發(fā)布/訂閱庫(kù),
首先安裝插件
npm i pubsub-js
具體使用方法如下:
訂閱方
import PubSub from "pubsub-js";
import { useState } from "react";
export default function BordertherB() {
const [value, setValue] = useState();
//使用PubSub.subscribe訂閱一個(gè)事件, 第一個(gè)參數(shù)為訂閱事件名稱, 第二個(gè)參數(shù)訂閱內(nèi)容
PubSub.subscribe("input", function (mag, value) {
setValue(value);
});
return <div>B組件接收數(shù)據(jù):{value}</div>;
}
發(fā)布方
import { useRef } from "react";
import PubSub from "pubsub-js";
export default function BordertherA() {
const inputRef = useRef();
const sendData = () => {
//使用PubSub.publish發(fā)布一個(gè)事件, 第一個(gè)參數(shù)是事件名稱, 第二個(gè)參數(shù)是額外參數(shù)
PubSub.publish("input", inputRef.current.value);
};
return (
<div style={{ background: "#ca6" }}>
A組件發(fā)生數(shù)據(jù):
<form
onSubmit={(e) => {
e.preventDefault(); //阻止表單默認(rèn)提交事件
}}
>
<input ref={inputRef} />
<button onClick={sendData}>發(fā)送</button>
</form>
</div>
);
}
- Redux 是 JavaScript 狀態(tài)容器，提供可預(yù)測(cè)化的狀態(tài)管理芒划。
使用方法:
首先安裝插件
npm i redux
具體使用方法如下
App.js
import A from "./A";
import B from "./B";
import store from "./sotre";
export default function App() {
return (
<div className="App">
<h1>Redux 傳參</h1>
<div style={{ backgruond: "skyblue" }}>
<div>
<button
onClick={() => {
store.dispatch({ type: "counter/incremented" });
}}
>
加一
</button>
<button
onClick={() => {
store.dispatch({ type: "counter/decremented" });
}}
>
減一
</button>
</div>
<A />
<B />
</div>
</div>
);
}
sotre.js
import { createStore } from "redux";
const counterReducer = (state = { value: 0 }, action) => {
switch (action.type) {
case "counter/incremented":
return { value: state.value + 1 };
case "counter/decremented":
return { value: state.value - 1 };
default:
return state;
}
};
const store = createStore(counterReducer);
export default store;
A.js
import { useState } from "react";
import store from "./sotre";
export default function A() {
const [count, setCount] = useState();
store.subscribe((a) => {
const { value } = store.getState();
setCount(value);
});
return <div>A組件: {count}</div>;
}
B.js
import { useState } from "react";
import store from "./sotre";
export default function B() {
const [count, setCount] = useState();
store.subscribe((a) => {
const { value } = store.getState();
setCount(value);
});
return <div>B組件: {count}</div>;
}
Redux詳情使用方法請(qǐng)參考官方文檔 入門(mén) Redux | Redux 中文官網(wǎng)
