ReactでのBox,Paper,Boxの関数化について

Question

Reactでmuiを用いてアプリを作成しています。その際、以下のようにBox,Paper,Boxを重ねて使いたいと考えています。この記述を複数回用いたいのですが、全てに同じように記載するとコードが長くなってしまい可読性を失ってしまっています。

<Box mx={5}>
  <Paper elevation={3}>
    <Box p={5}>
      test
    </Box>
  </Paper>
</Box>

そこで以下のように関数化できないかと考えているのですが、やり方がわかりません。
下記のMyBoxのように関数化することは可能なのでしょうか？

<MyBox>
test
</MyBox>

Answer 1

関数ではなく、コンポーネント化ですね。

React.Component

Qiita Reactコンポーネントの基本

Comments

[gymel]

ありがとうございます！
後出しになってしまって申し訳ないのですがコードのtestの部分にオリジナルのコンポーネントを入れたいと考えています。その際、いただいたリンク先のようにコンポーネントを変数（prop）として渡せず悩んでいます。
```
// 本来はもっと複雑でバリエーションが複数（chartやtableなど）
const MyComponent = () => {
return (
<div>
test
</div>
);
};

const MyBox = (props) => {
return (
<Box mx={5}>
<Paper elevation={3}>
<Box p={5}>
{props.contents}
</Box>
</Paper>
</Box>
);
};

<MyBox contents={MyComponent}/>
```
そのため、質問のようなに<MyBox><MyComponent/></MyBox>のように記載が可能なコンポーネントの作成方法が知りたいのですが、教えていただけないでしょうか？

[Matsumon0104]

propsにはコンポーネントは渡しません。主に値を渡します。
「{props.contents}」部分にコンポーネントを使いたい場合は、別でコンポーネントを定義して入れてください。

<Box mx={5}>
<Paper elevation={3}>
<Box p={5}>
<component2></component2> <!-- このコンポーネントも定義
</Box>
</Paper>
</Box>

[Matsumon0104]

componentで出力したいエレメントを変更する場合は、「prop」の値でエレメントのタイプを指定して、if文で出力するエレメントを変える方法もできます。

https://ja.reactjs.org/docs/conditional-rendering.html

[gymel]

すみません、私が意図を掴めないのか、ちゃんと質問をできていないのかうまく理解ができません。
私が知りたいことは以下のように同じBox, Paper, Boxを繰り返す構造をコンポーネント化をして簡易にできるかどうかです。

（元のコード）
<Box mx={5}>
<Paper elevation={3}>
<Box p={5}>
<Table1/>
</Box>
</Paper>
</Box>

<Box mx={5}>
<Paper elevation={3}>
<Box p={5}>
<Chart1/>
</Box>
</Paper>
</Box>

<Box mx={5}>
<Paper elevation={3}>
<Box p={5}>
<Image1/>
</Box>
</Paper>
</Box>

（理想とするコード）
<MyBox>
<Table1/>
</MyBox>
<MyBox>
<Chart1/>
</MyBox>
<MyBox>
<Image1/>
</MyBox>

* Table1, Chart1, Image1ではダッシュボードのようにグラフや表など全く異なるものを記載しています。
* Table1, Chart1, Image1の定義内にBox, Paper, Boxの記述を書けば簡略化できますが、同じ内容のコードが別のコンポーネント内に散らばってしまうため、保守性・可読性が落ちてしまうと考えています。
* またpropでif文で分岐することで書けることはわかりますが、上のように書けるのであればダッシュボードのコンテンツが分かりやすく書けると思い質問させていただきました。

<MyBox><Image1/></MyBox>
が
<Box mx={5}>
<Paper elevation={3}>
<Box p={5}>
<Image1/>
</Box>
</Paper>
</Box>
と同じ動作をするようなMyBoxを定義することは可能でしょうか？

[gymel]

すみません、自己解決しました。
以下のようにchildrenで指定すればいいようですね。

const MyBox = (props) => {
return (
<Box mx={5}>
<Paper elevation={3}>
<Box p={5}>{props.children}</Box>
</Paper>
</Box>
);
};