ReactJS 子コンポーネントから親コンポーネントへデータを渡す5つの方法
2024-04-02
ReactJSで子コンポーネントから親コンポーネントにデータを渡す方法
props
最も一般的な方法は、propsを使用することです。propsは、親コンポーネントから子コンポーネントにデータを渡すためのオブジェクトです。
例:
// 親コンポーネント
const Parent = () => {
const data = "Hello from parent!";
return (
<Child data={data} />
);
};
// 子コンポーネント
const Child = ({ data }) => {
console.log(data); // "Hello from parent!" が出力される
return (
<div>{data}</div>
);
};
コールバック関数
子コンポーネントから親コンポーネントにデータを渡すために、コールバック関数を定義することもできます。
// 親コンポーネント
const Parent = () => {
const [data, setData] = useState("");
const getDataFromChild = (data) => {
setData(data);
};
return (
<Child getDataFromChild={getDataFromChild} />
);
};
// 子コンポーネント
const Child = ({ getDataFromChild }) => {
const handleClick = () => {
getDataFromChild("Hello from child!");
};
return (
<button onClick={handleClick}>データを送信</button>
);
};
Context APIは、コンポーネントツリー全体でデータを共有するための便利な方法です。
// Context
const MyContext = createContext();
// 親コンポーネント
const Parent = () => {
const [data, setData] = useState("");
return (
<MyContext.Provider value={data}>
<Child />
</MyContext.Provider>
);
};
// 子コンポーネント
const Child = () => {
const data = useContext(MyContext);
// ...
};
その他の方法
上記以外にも、Reduxや状態管理ライブラリを使用して、子コンポーネントから親コンポーネントにデータを渡すことができます。
ReactJSで子コンポーネントから親コンポーネントにデータを渡すには、いくつかの方法があります。どの方法を使用するかは、状況によって異なります。
props
// 親コンポーネント
const Parent = () => {
const data = "Hello from parent!";
return (
<div>
<h1>親コンポーネント</h1>
<Child data={data} />
</div>
);
};
// 子コンポーネント
const Child = ({ data }) => {
return (
<div>
<h2>子コンポーネント</h2>
<p>{data}</p>
</div>
);
};
ReactDOM.render(<Parent />, document.getElementById("root"));
コールバック関数
// 親コンポーネント
const Parent = () => {
const [data, setData] = useState("");
const getDataFromChild = (data) => {
setData(data);
};
return (
<div>
<h1>親コンポーネント</h1>
<Child getDataFromChild={getDataFromChild} />
<p>データ: {data}</p>
</div>
);
};
// 子コンポーネント
const Child = ({ getDataFromChild }) => {
const handleClick = () => {
getDataFromChild("Hello from child!");
};
return (
<div>
<h2>子コンポーネント</h2>
<button onClick={handleClick}>データを送信</button>
</div>
);
};
ReactDOM.render(<Parent />, document.getElementById("root"));
このコードでは、親コンポーネント Parent は getDataFromChild というコールバック関数を子コンポーネント Child に渡しています。子コンポーネント Child は、getDataFromChild 関数を使用して、親コンポーネントにデータを送信します。
Context API
// Context
const MyContext = createContext();
// 親コンポーネント
const Parent = () => {
const [data, setData] = useState("");
return (
<MyContext.Provider value={data}>
<div>
<h1>親コンポーネント</h1>
<Child />
</div>
</MyContext.Provider>
);
};
// 子コンポーネント
const Child = () => {
const data = useContext(MyContext);
return (
<div>
<h2>子コンポーネント</h2>
<p>データ: {data}</p>
</div>
);
};
ReactDOM.render(<Parent />, document.getElementById("root"));
このコードでは、MyContext という Context を作成し、親コンポーネント Parent でデータを提供しています。子コンポーネント Child は、useContext フックを使用して、Context からデータを取得しています。
子コンポーネントから親コンポーネントにデータを渡す他の方法
状態リフトは、子コンポーネントで管理する状態を親コンポーネントに移動させる方法です。
// 親コンポーネント
const Parent = () => {
const [data, setData] = useState("");
return (
<div>
<h1>親コンポーネント</h1>
<Child data={data} setData={setData} />
</div>
);
};
// 子コンポーネント
const Child = ({ data, setData }) => {
const handleClick = () => {
setData("Hello from child!");
};
return (
<div>
<h2>子コンポーネント</h2>
<button onClick={handleClick}>データを送信</button>
</div>
);
};
ReactDOM.render(<Parent />, document.getElementById("root"));
このコードでは、子コンポーネント Child で管理していた data の状態を、親コンポーネント Parent に移動しています。
カスタムフックは、コンポーネント間でロジックを共有するための便利な方法です。
// useData.js
const useData = () => {
const [data, setData] = useState("");
const getDataFromChild = (data) => {
setData(data);
};
return { data, setData, getDataFromChild };
};
// 親コンポーネント
const Parent = () => {
const { data, getDataFromChild } = useData();
return (
<div>
<h1>親コンポーネント</h1>
<Child getDataFromChild={getDataFromChild} />
<p>データ: {data}</p>
</div>
);
};
// 子コンポーネント
const Child = ({ getDataFromChild }) => {
const handleClick = () => {
getDataFromChild("Hello from child!");
};
return (
<div>
<h2>子コンポーネント</h2>
<button onClick={handleClick}>データを送信</button>
</div>
);
};
ReactDOM.render(<Parent />, document.getElementById("root"));
このコードでは、useData というカスタムフックを作成し、親コンポーネント Parent と子コンポーネント Child で使用しています。
高階コンポーネントは、別のコンポーネントをラップして、追加の機能を与える方法です。
// withData.js
const withData = (Component) => {
const [data, setData] = useState("");
const getDataFromChild = (data) => {
setData(data);
};
return (
<Component data={data} getDataFromChild={getDataFromChild} />
);
};
// 親コンポーネント
const Parent = () => {
return (
<div>
<h1>親コンポーネント</h1>
<Child />
</div>
);
};
// 子コンポーネント
const Child = ({ data, getDataFromChild }) => {
const handleClick = () => {
getDataFromChild("Hello from child!");
};
return (
<div>
<h2>子コンポーネント</h2>
<button onClick={handleClick}>データを送信</button>
</div>
);
};
const EnhancedChild = withData(Child);
ReactDOM.render(<Parent />, document.getElementById("root"));
このコードでは、withData という高階コンポーネントを作成し、子コンポーネント Child に data と getDataFromChild の props を追加しています。
上記の方法以外にも、さまざまな方法で子コンポーネントから親コンポーネントにデータを渡すことができます。状況に合わせて最適な方法を選択してください。
reactjs
