Skip to content

Translate "unmountComponentAtNode" #660

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.

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

Closed
wants to merge 51 commits into from
Closed
Changes from 1 commit
Commits
Show all changes
51 commits
Select commit Hold shift + click to select a range
c0c9930
Translate "Common Components (e.g., <div>)"
smikitky Jul 19, 2023
f132c19
Fix "onFocus" description
smikitky Jul 20, 2023
b18d317
Translate sidebar
smikitky Jul 20, 2023
c5fbe33
Translate "createPortal"
smikitky Jul 30, 2023
73aa58f
Merge branch 'main' into tr/components-common
smikitky Aug 4, 2023
1c0ceed
Translate "<textarea>" reference
smikitky Aug 8, 2023
02fb211
Translate "flushSync" reference
smikitky Aug 8, 2023
6b61cd4
Annex to #6138 (#6226)
AhmedBaset Aug 15, 2023
842c24c
Fix broken link for Typescript Discord invite (#6224)
ThomasCharuel Aug 17, 2023
8e79517
微修正
smikitky Aug 17, 2023
f67811b
Clarify these features are not related to Next (#6229)
lunaleaps Aug 21, 2023
811e77b
Translate "renderTo{Readable|Pipable}Stream"
smikitky Aug 20, 2023
5a6bca5
Translate four reactdom/server render methods
smikitky Aug 21, 2023
11e4522
Translate react-dom server API index
smikitky Aug 21, 2023
09c8d31
Merge branch 'main' into tr/textarea
smikitky Aug 22, 2023
f683985
Merge branch 'main' into tr/components-common
smikitky Aug 22, 2023
d0bd5f4
Finish sidebar translations
smikitky Aug 22, 2023
bf5b648
Translate "Using TypeScript"
smikitky Aug 22, 2023
7fe11eb
Translate "unmountComponentAtNode"
smikitky Aug 22, 2023
54e9a45
微修正
smikitky Aug 23, 2023
3ca9f1f
Merge pull request #637 from reactjs/tr/components-common
smikitky Aug 23, 2023
fed5cdc
Merge pull request #658 from reactjs/tr/sidebars
smikitky Aug 23, 2023
3189529
Add React Native EU 2023 to the conferences page (#6254)
elicwhite Aug 23, 2023
1ae6026
Fix top page layout
smikitky Aug 24, 2023
ea6fb5c
Translate createContext (#638)
natsuokawai Aug 24, 2023
2e70fa5
Translate "<progress>" component (#640)
natsuokawai Aug 24, 2023
a438e46
Merge pull request #664 from reactjs/fix-home
smikitky Aug 24, 2023
1910a99
Translate "useReducer" (#641)
locol23 Aug 26, 2023
0db8947
Translate "<select>" component (#644)
ainoshment Aug 28, 2023
95f4b52
merging all conflicts
react-translations-bot Aug 28, 2023
74f9720
Resolve conflicts
smikitky Aug 28, 2023
c4d1be9
Translate SNS card images
smikitky Aug 28, 2023
e7b84b8
Translate "<input>" (#646)
sbasken Aug 28, 2023
10e4e88
Merge pull request #671 from reactjs/sync-31895292
koba04 Aug 28, 2023
774042f
Merge pull request #672 from reactjs/og
smikitky Aug 29, 2023
9b5862c
Merge pull request #647 from reactjs/tr/createPortal
smikitky Aug 29, 2023
722b546
fix(docs): remove inactive indian meetup groups (#6267)
CarreraPHP Aug 30, 2023
c351df8
Merge pull request #649 from reactjs/tr/textarea
smikitky Aug 31, 2023
12c316a
Merge pull request #650 from reactjs/tr/flushSync
smikitky Aug 31, 2023
659a0af
fix link
yukari-n-erb Sep 1, 2023
e11e3fc
Merge branch 'main' of https://github.com/reactjs/react.dev into sync…
react-translations-bot Sep 4, 2023
3d6d37b
Merge pull request #673 from yukari-n-erb/fix-link
smikitky Sep 4, 2023
5b8750e
Translate "hydrate" (#653)
riku929hr Sep 4, 2023
57357c8
Merge pull request #674 from reactjs/sync-722b5464
koba04 Sep 4, 2023
be9c64c
Merge pull request #654 from reactjs/tr/renderToStream
smikitky Sep 5, 2023
de29c64
Merge pull request #655 from reactjs/tr/render-methods
smikitky Sep 5, 2023
0a4d8a8
Merge pull request #656 from reactjs/tr/react-dom-server-index
smikitky Sep 5, 2023
f3d1eac
Merge branch 'main' into tr/typescript
koba04 Sep 5, 2023
e85263a
Apply suggestion from code review
smikitky Sep 5, 2023
8b475f3
Merge pull request #659 from reactjs/tr/typescript
smikitky Sep 5, 2023
f69e3fd
Merge pull request #660 from reactjs/tr/unmountComponentAtNode
smikitky Sep 5, 2023
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
30 changes: 15 additions & 15 deletions src/content/reference/react-dom/unmountComponentAtNode.md
Original file line number Diff line number Diff line change
Expand Up @@ -4,15 +4,15 @@ title: unmountComponentAtNode

<Deprecated>

This API will be removed in a future major version of React.
この API は、将来の React のメジャーバージョンで削除されます。

In React 18, `unmountComponentAtNode` was replaced by [`root.unmount()`](/reference/react-dom/client/createRoot#root-unmount).
React 18 では、`unmountComponentAtNode` [`root.unmount()`](/reference/react-dom/client/createRoot#root-unmount) に置き換えられました。

</Deprecated>

<Intro>

`unmountComponentAtNode` removes a mounted React component from the DOM.
`unmountComponentAtNode` は、マウントされた React コンポーネントを DOM から削除します。

```js
unmountComponentAtNode(domNode)
Expand All @@ -24,11 +24,11 @@ unmountComponentAtNode(domNode)

---

## Reference {/*reference*/}
## リファレンス {/*reference*/}

### `unmountComponentAtNode(domNode)` {/*unmountcomponentatnode*/}

Call `unmountComponentAtNode` to remove a mounted React component from the DOM and clean up its event handlers and state.
`unmountComponentAtNode` を呼び出して、マウントされた React コンポーネントを DOM から削除し、そのイベントハンドラと state をクリーンアップします。

```js
import { unmountComponentAtNode } from 'react-dom';
Expand All @@ -39,21 +39,21 @@ render(<App />, domNode);
unmountComponentAtNode(domNode);
```

[See more examples below.](#usage)
[さらに例を見る](#usage)

#### Parameters {/*parameters*/}
#### 引数 {/*parameters*/}

* `domNode`: A [DOM element.](https://developer.mozilla.org/en-US/docs/Web/API/Element) React will remove a mounted React component from this element.
* `domNode`: [DOM 要素](https://developer.mozilla.org/en-US/docs/Web/API/Element)React はこの要素からマウント済みの React コンポーネントを削除します。

#### Returns {/*returns*/}
#### 返り値 {/*returns*/}

`unmountComponentAtNode` returns `true` if a component was unmounted and `false` otherwise.
`unmountComponentAtNode` は、コンポーネントがアンマウントされた場合は `true` を、そうでない場合は `false` を返します。

---

## Usage {/*usage*/}
## 使用法 {/*usage*/}

Call `unmountComponentAtNode` to remove a <CodeStep step={1}>mounted React component</CodeStep> from a <CodeStep step={2}>browser DOM node</CodeStep> and clean up its event handlers and state.
`unmountComponentAtNode` を呼び出して、<CodeStep step={1}>マウントされた React コンポーネント</CodeStep><CodeStep step={2}>ブラウザの DOM ノード</CodeStep>から削除し、そのイベントハンドラと state をクリーンアップします。

```js [[1, 5, "<App />"], [2, 5, "rootNode"], [2, 8, "rootNode"]]
import { render, unmountComponentAtNode } from 'react-dom';
Expand All @@ -67,11 +67,11 @@ unmountComponentAtNode(rootNode);
```


### Removing a React app from a DOM element {/*removing-a-react-app-from-a-dom-element*/}
### DOM 要素から React アプリを削除する {/*removing-a-react-app-from-a-dom-element*/}

Occasionally, you may want to "sprinkle" React on an existing page, or a page that is not fully written in React. In those cases, you may need to "stop" the React app, by removing all of the UI, state, and listeners from the DOM node it was rendered to.
ときに、既存のページや、完全に React で書かれていないページに、React を「散りばめる」ことがあります。そのような場合、アプリがレンダーされた DOM ノードから UI、state、リスナをすべて削除して React アプリを「停止」する必要があるかもしれません。

In this example, clicking "Render React App" will render a React app. Click "Unmount React App" to destroy it:
以下の例では、"Render React App" をクリックすると React アプリがレンダーされます。"Unmount React App" をクリックするとそれが破棄されます。

<Sandpack>

Expand Down