Skip to content

Translate composition-vs-inheritance #5

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
smikitky merged 7 commits into from
Feb 1, 2019
Merged

Translate composition-vs-inheritance #5

Changes from 1 commit
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
5945234
docs: Translate composition-vs-inheritance
Naturalclar Jan 31, 2019
82161b1
doc: modify wording so that it doesn't limit whats being imported
Feb 1, 2019
46cdb90
doc: remove extra comma
Feb 1, 2019
334a89e
docs: add missing translation and deleted some spaces
Feb 1, 2019
cd392fd
Merge branch 'master' of https://github.com/reactjs/ja.reactjs.org in…
Feb 1, 2019
1e97b6a
run textlint
Feb 1, 2019
74a52df
docs: modify translation to be closer to original text
Feb 1, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Prev Previous commit
Next Next commit
docs: add missing translation and deleted some spaces
  • Loading branch information
jesse committed Feb 1, 2019
commit 334a89eda0005f8a40abe63f563d4cf70a962fba
17 changes: 9 additions & 8 deletions content/docs/composition-vs-inheritance.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@ React は強力なコンポジションモデルを備えており、コンポ

コンポーネントの中には事前には子要素を知らないものもあります。これは `Sidebar` や `Dialog` のような汎用的な "入れ物" をあらわすコンポーネントではよく使われています。

このようなコンポーネントでは特別な `children` という `props` を使い、以下のようにして受け取った子要素を出力することができます。
このようなコンポーネントでは特別な `children` という props を使い、以下のようにして受け取った子要素を出力することができます。

```js{4}
function FancyBorder(props) {
Expand Down Expand Up @@ -47,9 +47,10 @@ function WelcomeDialog() {

**[Try it on CodePen](https://codepen.io/gaearon/pen/ozqNOV?editors=0010)**

`<FancyBorder>` JSX タグの内側のあらゆる要素は `FancyBorder` に `children` という `props` として渡されます。 `FancyBorder` は `<div>` の内側に `{props.children}` をレンダリングするので、渡された要素が出力されます。
`<FancyBorder>` JSX タグの内側のあらゆる要素は `FancyBorder` に `children` という props として渡されます。 `FancyBorder` は `<div>` の内側に `{props.children}` をレンダリングするので、渡された要素が出力されます。

あまり一般的ではありませんが、複数の箇所に子要素を追加したいケースも考えられます。そのようなケースでは 以下のように `children` の `props` の代わりに独自の `props` を作成して渡すことができます。
あまり一般的ではありませんが、複数の箇所に子要素を追加したいケースも考えられます。そのようなケースでは 以下のように `children` の props の代わりに独自の props を作成して渡すことができます。
この実装方法は他のライブラリで言うところの slot や yield のような考え方ですが、React のコンポーネントに props として渡せるものに制限はありません。

```js{5,8,18,21}
function SplitPane(props) {
Expand Down Expand Up @@ -80,13 +81,13 @@ function App() {

[**Try it on CodePen**](https://codepen.io/gaearon/pen/gwZOJp?editors=0010)

`<Contacts />` や `<Chat />` のような React の要素はただのオブジェクトなので、他のあらゆるデータと同様に `props` として渡すことができます。
`<Contacts />` や `<Chat />` のような React の要素はただのオブジェクトなので、他のあらゆるデータと同様に props として渡すことができます。

## 特化したケース (Specialization)
## 特化したコンポーネント (Specialization)

コンポーネントを他のコンポーネントの "特別なケース" として考えることがあります。例えば、`WelcomeDialog` は `Dialog` の特別なケースと言えるでしょう。

React ではこれもコンポジションで実現できます。汎用的なコンポーネントに `props` を渡して設定することで、より特化したコンポーネントを作成することができます。
React ではこれもコンポジションで実現できます。汎用的なコンポーネントに props を渡して設定することで、より特化したコンポーネントを作成することができます。

```js{5,8,16-18}
function Dialog(props) {
Expand Down Expand Up @@ -167,6 +168,6 @@ class SignUpDialog extends React.Component {

Facebook では、何千というコンポーネントで React を使用していますが、コンポーネント継承による階層構造が推奨されるケースは全く見つかっていません。

`props` とコンポジションにより、コンポーネントの見た目と振る舞いを明示的かつ安全にカスタマイズするのに十分な柔軟性が得られます。 コンポーネントはどのような `props` でも受け付けることができ、それはプリミティブ値でも、React 要素でも、あるいは関数であってもよい、ということに留意して下さい。
props とコンポジションにより、コンポーネントの見た目と振る舞いを明示的かつ安全にカスタマイズするのに十分な柔軟性が得られます。コンポーネントはどのような props でも受け付けることができ、それはプリミティブ値でも、React 要素でも、あるいは関数であってもよい、ということに留意して下さい。

コンポーネント間で非 UI 機能を再利用したい場合は、それを別の JavaScript モジュールに抽出することをお勧めします。 コンポーネントはその関数やオブジェクト、クラスなどを継承することなくインポートすることで使用することができるでしょう。
コンポーネント間で非 UI 機能を再利用したい場合は、それを別の JavaScript モジュールに抽出することをお勧めします。コンポーネントはその関数やオブジェクト、クラスなどを継承することなくインポートすることで使用することができるでしょう。