Skip to content

Commit ff5573d

Browse files
fsubalsmikitky
authored andcommitted
translate Advanced Guides > Portals (#44)
* docs/portals 本文を試訳 * コード内のコメントの残りも翻訳 * 誤字・改行を修正 * 気になる細かい表現を修正 * 同じように〜、同じように のような重複を避ける * fire は 発行 → 発火 で訳すように変更 * 数字の前後にスペースが抜けていたので修正 * first-class = 公式 Co-Authored-By: fsubal <[email protected]> * such as のニュアンスが抜けてしまっているので修正 Co-Authored-By: fsubal <[email protected]> * イベントのバブリング第1文を修正 Co-Authored-By: fsubal <[email protected]> * Update content/docs/portals.md Co-Authored-By: fsubal <[email protected]> * コード内コメントの訳を修正 Co-Authored-By: fsubal <[email protected]> * ** → * * 外部サイトの名前は一旦そのままにしておく * Revert "外部サイトの名前は一旦そのままにしておく" This reverts commit bb0d86e. * コメントの行数が変わると、コードのハイライトがずれるので、元の行数に収める * (portal) を追加 Co-Authored-By: fsubal <[email protected]> * inherently のかかり方が変わってしまっている Co-Authored-By: fsubal <[email protected]> * 行末のスペースは削っておく
1 parent 7c6584b commit ff5573d

File tree

1 file changed

+32
-32
lines changed

1 file changed

+32
-32
lines changed

content/docs/portals.md

Lines changed: 32 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -1,24 +1,24 @@
11
---
22
id: portals
3-
title: Portals
3+
title: ポータル
44
permalink: docs/portals.html
55
---
66

7-
Portals provide a first-class way to render children into a DOM node that exists outside the DOM hierarchy of the parent component.
7+
ポータル (portal) は、親コンポーネントの DOM 階層外にある DOM ノードに対して子コンポーネントをレンダーするための公式の仕組みを提供します。
88

99
```js
1010
ReactDOM.createPortal(child, container)
1111
```
1212

13-
The first argument (`child`) is any [renderable React child](/docs/react-component.html#render), such as an element, string, or fragment. The second argument (`container`) is a DOM element.
13+
第 1 引数 (`child`) [React の子要素としてレンダー可能なもの](/docs/react-component.html#render)、例えば、要素、文字列、フラグメントなどです。第 2 引数 (`container`) DOM 要素を指定します。
1414

15-
## Usage
15+
## 使い方
1616

17-
Normally, when you return an element from a component's render method, it's mounted into the DOM as a child of the nearest parent node:
17+
通常、コンポーネントの `render` メソッドから要素を返すと、最も近い親ノードの子として DOM にマウントされます。
1818

1919
```js{4,6}
2020
render() {
21-
// React mounts a new div and renders the children into it
21+
// React は新しい div 要素をマウントし、子をその中に描画します
2222
return (
2323
<div>
2424
{this.props.children}
@@ -27,34 +27,34 @@ render() {
2727
}
2828
```
2929

30-
However, sometimes it's useful to insert a child into a different location in the DOM:
30+
しかし、時に子要素を DOM 上の異なる位置に挿入したほうが便利なことがあります。
3131

3232
```js{6}
3333
render() {
34-
// React does *not* create a new div. It renders the children into `domNode`.
35-
// `domNode` is any valid DOM node, regardless of its location in the DOM.
34+
// React は新しい div をつくり*ません*。子要素は `domNode` に対して描画されます。
35+
// `domNode` DOM ノードであれば何でも良く、 DOM 構造内のどこにあるかは問いません。
3636
return ReactDOM.createPortal(
3737
this.props.children,
3838
domNode
3939
);
4040
}
4141
```
4242

43-
A typical use case for portals is when a parent component has an `overflow: hidden` or `z-index` style, but you need the child to visually "break out" of its container. For example, dialogs, hovercards, and tooltips.
43+
ポータルの典型的なユースケースとは、親要素が `overflow: hidden` `z-index` のスタイルを持っていても、子要素がコンテナを「飛び出して」見える必要があるものです。例えば、ダイアログ、ホバーカード、ツールチップがそれに当たります。
4444

45-
> Note:
45+
> 補足
4646
>
47-
> When working with portals, remember that [managing keyboard focus](/docs/accessibility.html#programmatically-managing-focus) becomes very important.
47+
> ポータルを利用する際は、[キーボードのフォーカスの管理](/docs/accessibility.html#programmatically-managing-focus)を行うことが重要になるので、忘れずに行ってください。
4848
>
49-
> For modal dialogs, ensure that everyone can interact with them by following the [WAI-ARIA Modal Authoring Practices](https://www.w3.org/TR/wai-aria-practices-1.1/#dialog_modal).
49+
> モーダルダイアログについては [WAI-ARIA モーダルの推奨実装方法](https://www.w3.org/TR/wai-aria-practices-1.1/#dialog_modal)に従い、誰もが利用できるという状態を確保してください。
5050
5151
[**Try it on CodePen**](https://codepen.io/gaearon/pen/yzMaBd)
5252

53-
## Event Bubbling Through Portals
53+
## ポータルを介したイベントのバブリング
5454

55-
Even though a portal can be anywhere in the DOM tree, it behaves like a normal React child in every other way. Features like context work exactly the same regardless of whether the child is a portal, as the portal still exists in the *React tree* regardless of position in the *DOM tree*.
55+
ポータルは DOM ツリーのどこにでも存在できますが、他のあらゆる点では通常の React の子要素と変わらずに振る舞います。コンテクスト (context) のような機能は、たとえ子要素がポータルであろうと全く同じように動きます。というのも、*DOM ツリー*上の位置にかかわらず、ポータルは依然として *React のツリー*内にいるからです。
5656

57-
This includes event bubbling. An event fired from inside a portal will propagate to ancestors in the containing *React tree*, even if those elements are not ancestors in the *DOM tree*. Assuming the following HTML structure:
57+
これにはイベントのバブリングも含まれます。ポータルの内部で発火したイベントは *React のツリー*内の祖先へと伝播します。たとえそれが *DOM ツリー*上では祖先でなくともです。次のような HTML 構造があったとして、
5858

5959
```html
6060
<html>
@@ -65,10 +65,10 @@ This includes event bubbling. An event fired from inside a portal will propagate
6565
</html>
6666
```
6767

68-
A `Parent` component in `#app-root` would be able to catch an uncaught, bubbling event from the sibling node `#modal-root`.
68+
`#app-root` 内にある `Parent` コンポーネントは、 `#modal-root` 内のコンポーネントから伝播したイベントが捕捉されなかった場合に、それを捕捉できます。
6969

7070
```js{28-31,42-49,53,61-63,70-71,74}
71-
// These two containers are siblings in the DOM
71+
// この 2 つのコンテナは DOM 上の兄弟要素とします
7272
const appRoot = document.getElementById('app-root');
7373
const modalRoot = document.getElementById('modal-root');
7474
@@ -79,14 +79,14 @@ class Modal extends React.Component {
7979
}
8080
8181
componentDidMount() {
82-
// The portal element is inserted in the DOM tree after
83-
// the Modal's children are mounted, meaning that children
84-
// will be mounted on a detached DOM node. If a child
85-
// component requires to be attached to the DOM tree
86-
// immediately when mounted, for example to measure a
87-
// DOM node, or uses 'autoFocus' in a descendant, add
88-
// state to Modal and only render the children when Modal
89-
// is inserted in the DOM tree.
82+
// ポータルの要素が DOM ツリーに挿入されるのは、
83+
// Modal の子要素がマウントされた後になります。
84+
// つまり、子要素は一旦どこにも結びつかない
85+
// DOM ノードへとマウントされるということです。
86+
// もし子コンポーネントがマウント後すぐに DOM ツリーに結びついてほしい ――
87+
// たとえば DOM ノードの大きさを測りたい、子孫要素で `autoFocus` を使いたいなど
88+
// ―― 場合は、 Modal に状態を持たせて Modal
89+
// DOM ツリーに挿入されているときだけ子要素をレンダーするようにします。
9090
modalRoot.appendChild(this.el);
9191
}
9292
@@ -110,9 +110,9 @@ class Parent extends React.Component {
110110
}
111111
112112
handleClick() {
113-
// This will fire when the button in Child is clicked,
114-
// updating Parent's state, even though button
115-
// is not direct descendant in the DOM.
113+
// これは Child 内のボタンがクリックされた際に発火し、
114+
// Parentstate を更新します。
115+
// たとえそのボタンが DOM 上では直系の子孫でなかったとしてもです。
116116
this.setState(state => ({
117117
clicks: state.clicks + 1
118118
}));
@@ -137,8 +137,8 @@ class Parent extends React.Component {
137137
}
138138
139139
function Child() {
140-
// The click event on this button will bubble up to parent,
141-
// because there is no 'onClick' attribute defined
140+
// クリックするとイベントが親に伝播します。
141+
// なぜならここには `onClick` 属性が定義されてないからです。
142142
return (
143143
<div className="modal">
144144
<button>Click</button>
@@ -151,4 +151,4 @@ ReactDOM.render(<Parent />, appRoot);
151151

152152
[**Try it on CodePen**](https://codepen.io/gaearon/pen/jGBWpE)
153153

154-
Catching an event bubbling up from a portal in a parent component allows the development of more flexible abstractions that are not inherently reliant on portals. For example, if you render a `<Modal />` component, the parent can capture its events regardless of whether it's implemented using portals.
154+
ポータルから伝播したイベントが親コンポーネントで捕捉できるということは、ポータルに本質的に依存することのない、より柔軟な抽象化が可能であるということを示しています。たとえば `<Modal />` の実装がポータルを使っているかに関係なく、`<Modal />` コンポーネントをレンダーしてそこから来るイベントを捕捉することができます。

0 commit comments

Comments
 (0)