Reactのchildrenを使ってコンポーネントにコンポーネントを渡す

■はじめに

props.childrenを使って、コンポーネントを別のコンポーネントに渡す方法を知ったので、備忘録を残します。

■props.childrenとは何か？

import './App.css';
import { Container } from './components/Container';
import { UserProfile } from './components/UserProfile';

function App() {
	return (
		<Container>
			{100}
		</Container>
	);
}

export default App;

<Container> ~ </Container>の開始タグと終了タグがあります。

このように書いた場合、<Container> ~ </Container>の中に書かれた値が、props.childrenプロパティに渡ってきます。

export const Container = ({ children }) => {
    return (
        <div className="container">
            <h1>Containerコンポーネント</h1>
            {children}
        </div>
    )
}

この書き方の何が便利かと言いますと、コンポーネントを別のコンポーネントに渡したいときに便利です。

■props.childrenを使ってコンポーネントにコンポーネントを渡してみる

import './App.css';
import { Container } from './components/Container';
import { UserProfile } from './components/UserProfile';

function App() {
	const userProfileObj = [
		{ name: '田中', age: 25, email: '[e-mail]' },
		{ name: '佐藤', age: 30, email: '[e-mail]' },
	];

	return (
		<Container>
			<UserProfile {...userProfileObj[0]} />
			<UserProfile {...userProfileObj[1]} />
		</Container>
	);
}

export default App;

export const UserProfile = ({ name, age, email }) => {
	return (
		<div className="user-profile">
			<h2>User Profileコンポーネント</h2>
			<p>Name: {name}</p>
			<p>Age: {age}</p>
			<p>Email: {email}</p>
		</div>
	);
};

export const Container = ({ children }) => {
    return (
        <div className="container">
            <h1>Containerコンポーネント</h1>
            {children}
        </div>
    )
}

UserProfileコンポーネントがpropsで受け取った情報を使って、プロフィールのElementを作るコンポーネントです。

<Container>〜</Container>でUserProfileコンポーネントをContainerのprops.childresに渡しています。!

childrenには、UserProfileコンポーネントの JSオブジェクトが、配列でわたってきます。

それを{children}でレンダリングしています。

■<Container>〜</Container>の終了タグ無しで、props.childresにコンポーネントを渡す

import './App.css';
import { Container } from './components/Container';
import { UserProfile } from './components/UserProfile';

function App() {
	const userProfileObj = [
		{ name: '田中', age: 25, email: '[e-mail]' },
		{ name: '佐藤', age: 30, email: '[e-mail]' },
	];

	return (
		<Container
			children={[<UserProfile {...userProfileObj[0]} />, <UserProfile {...userProfileObj[1]} />]}
			user1={<UserProfile {...userProfileObj[0]} />}
			user2={<UserProfile {...userProfileObj[1]} />}
		/>
	);
}

export default App;

export const UserProfile = ({ name, age, email }) => {
	return (
		<div className="user-profile">
			<h2>User Profileコンポーネント</h2>
			<p>Name: {name}</p>
			<p>Age: {age}</p>
			<p>Email: {email}</p>
		</div>
	);
};

export const Container = ({ children, user1, user2 }) => {
	console.log(children);
	return (
		<div className="container">
			<h1>Containerコンポーネント</h1>
			{children}
			<div>{user1}</div>
			<div>{user2}</div>
		</div>
	);
};

<Container>〜</Container>の終了タグ無しで、props.childresにコンポーネントを渡す場合は、children={[<UserProfile {...userProfileObj[0]} />, <UserProfile {...userProfileObj[1]} />]}のように書きます。

childrenというプロパティで、UserProfileコンポーネントを配列で渡しています。

受け取り側のContainerコンポーネントでは、props.childresを分割代入で取得しています。

また、user1={<UserProfile {...userProfileObj[0]} />}というように、UserProfileコンポーネントを個別に渡すこともできます。

個別に渡すことで、Containerコンポーネント内でUserProfileコンポーネントの表示位置を柔軟に変える事ができます。