props、useRef、useContextを使いこなしてReactで親子コンポーネント間通信
2024-04-02
Reactで子の状態にアクセスする方法
props を使用する
親コンポーネントから子コンポーネントに props を渡すことで、子コンポーネントは親コンポーネントの状態にアクセスできます。
// 親コンポーネント
const ParentComponent = () => {
const [count, setCount] = useState(0);
return (
<div>
<ChildComponent count={count} />
</div>
);
};
// 子コンポーネント
const ChildComponent = ({ count }) => {
console.log(count); // 親コンポーネントの `count` 状態にアクセスできます
return (
<div>
カウント: {count}
</div>
);
};
useRef を使用して、子コンポーネント内で状態を保持できます。
// 子コンポーネント
const ChildComponent = () => {
const countRef = useRef(0);
useEffect(() => {
// 子コンポーネント内で状態を更新できます
countRef.current++;
}, []);
console.log(countRef.current); // 子コンポーネント内で状態にアクセスできます
return (
<div>
カウント: {countRef.current}
</div>
);
};
// 親コンポーネント
const ParentComponent = () => {
const [count, setCount] = useState(0);
return (
<div>
<ChildComponent />
</div>
);
};
// 子コンポーネント
const ChildComponent = () => {
const count = useContext(MyContext);
console.log(count); // 親コンポーネントの `count` 状態にアクセスできます
return (
<div>
カウント: {count}
</div>
);
};
// MyContext.js
const MyContext = createContext(null);
export const MyContextProvider = ({ children }) => {
const [count, setCount] = useState(0);
return (
<MyContext.Provider value={count}>
{children}
</MyContext.Provider>
);
};
これらの方法はそれぞれ異なる利点と欠点があります。 状況に応じて最適な方法を選択する必要があります。
props を使用する
// 親コンポーネント
const ParentComponent = () => {
const [count, setCount] = useState(0);
return (
<div>
<ChildComponent count={count} />
</div>
);
};
// 子コンポーネント
const ChildComponent = ({ count }) => {
console.log(count); // 親コンポーネントの `count` 状態にアクセスできます
return (
<div>
カウント: {count}
</div>
);
};
useRef を使用する
// 子コンポーネント
const ChildComponent = () => {
const countRef = useRef(0);
useEffect(() => {
// 子コンポーネント内で状態を更新できます
countRef.current++;
}, []);
console.log(countRef.current); // 子コンポーネント内で状態にアクセスできます
return (
<div>
カウント: {countRef.current}
</div>
);
};
useContext を使用する
// 親コンポーネント
const ParentComponent = () => {
const [count, setCount] = useState(0);
return (
<div>
<ChildComponent />
</div>
);
};
// 子コンポーネント
const ChildComponent = () => {
const count = useContext(MyContext);
console.log(count); // 親コンポーネントの `count` 状態にアクセスできます
return (
<div>
カウント: {count}
</div>
);
};
// MyContext.js
const MyContext = createContext(null);
export const MyContextProvider = ({ children }) => {
const [count, setCount] = useState(0);
return (
<MyContext.Provider value={count}>
{children}
</MyContext.Provider>
);
};
子の状態にアクセスする他の方法
子コンポーネントの ref を使用する
ref を使用して、子コンポーネントのインスタンスを取得できます。 子コンポーネントのインスタンスには、状態へのアクセス権があります。
// 親コンポーネント
const ParentComponent = () => {
const childRef = useRef();
const handleClick = () => {
console.log(childRef.current.state.count); // 子コンポーネントの `count` 状態にアクセスできます
};
return (
<div>
<ChildComponent ref={childRef} />
<button onClick={handleClick}>カウントを取得</button>
</div>
);
};
// 子コンポーネント
const ChildComponent = ({ count }) => {
const [count, setCount] = useState(0);
return (
<div>
カウント: {count}
</div>
);
};
forwardRef を使用して、親コンポーネントから子コンポーネントに ref を渡すことができます。
// 親コンポーネント
const ParentComponent = () => {
const childRef = useRef();
const handleClick = () => {
console.log(childRef.current.state.count); // 子コンポーネントの `count` 状態にアクセスできます
};
return (
<div>
<ChildComponent ref={childRef} />
<button onClick={handleClick}>カウントを取得</button>
</div>
);
};
// 子コンポーネント
const ChildComponent = ({ count }) => {
const [count, setCount] = useState(0);
return (
<div>
カウント: {count}
</div>
);
};
const ForwardedChildComponent = forwardRef((props, ref) => {
return <ChildComponent {...props} ref={ref} />;
});
状態管理ライブラリを使用する
Reduxのような状態管理ライブラリを使用すると、コンポーネントツリー全体で状態を共有できます。
// 親コンポーネント
const ParentComponent = () => {
const dispatch = useDispatch();
const handleClick = () => {
dispatch({ type: 'INCREMENT_COUNT' });
};
return (
<div>
<ChildComponent />
<button onClick={handleClick}>カウントを増加</button>
</div>
);
};
// 子コンポーネント
const ChildComponent = () => {
const count = useSelector(state => state.count);
return (
<div>
カウント: {count}
</div>
);
};
注意事項
- 子の状態に直接アクセスすることは避けてください。 子の状態を変更する必要がある場合は、子コンポーネントに提供されたプロパティまたはメソッドを使用する必要があります。
- 状態管理ライブラリを使用する場合は、ライブラリのドキュメントをよく読んでください。
javascript reactjs
