Skip to content

Commit

Permalink
docs(cn): translate docs/web-components into Chinese (#156)
Browse files Browse the repository at this point in the history
* docs(cn): translate docs/web-components into Chinese

* docs(cn): Make sentences more fluent

* Update content/docs/web-components.md

Co-Authored-By: bailnl <bailnl@qq.com>

* Update web-components.md

* Update web-components.md
  • Loading branch information
bailnl authored and yuqingc committed Apr 1, 2019
1 parent 4619138 commit 9301bda
Showing 1 changed file with 12 additions and 12 deletions.
24 changes: 12 additions & 12 deletions content/docs/web-components.md
Original file line number Diff line number Diff line change
Expand Up @@ -6,11 +6,11 @@ redirect_from:
- "docs/webcomponents.html"
---

React and [Web Components](https://developer.mozilla.org/en-US/docs/Web/Web_Components) are built to solve different problems. Web Components provide strong encapsulation for reusable components, while React provides a declarative library that keeps the DOM in sync with your data. The two goals are complementary. As a developer, you are free to use React in your Web Components, or to use Web Components in React, or both.
React [Web Components](https://developer.mozilla.org/en-US/docs/Web/Web_Components) 为了解决不同的问题而生。Web Components 为可复用组件提供了强大的封装,而 React 则提供了声明式的解决方案,使 DOM 与数据保持同步。两者旨在互补。作为开发人员,可以自由选择在 Web Components 中使用 React,或者在 React 中使用 Web Components,或者两者共存。

Most people who use React don't use Web Components, but you may want to, especially if you are using third-party UI components that are written using Web Components.
大多数开发者在使用 React 时,不使用 Web Components,但可能你会需要使用,尤其是在使用 Web Components 编写的第三方 UI 组件时。

## Using Web Components in React {#using-web-components-in-react}
## 在 React 中使用 Web Components {#using-web-components-in-react}

```javascript
class HelloMessage extends React.Component {
Expand All @@ -20,14 +20,14 @@ class HelloMessage extends React.Component {
}
```

> Note:
> 注意:
>
> Web Components often expose an imperative API. For instance, a `video` Web Component might expose `play()` and `pause()` functions. To access the imperative APIs of a Web Component, you will need to use a ref to interact with the DOM node directly. If you are using third-party Web Components, the best solution is to write a React component that behaves as a wrapper for your Web Component.
> Web Components 通常暴露的是命令式 API。例如,Web Components 的组件 `video` 可能会公开 `play()` `pause()` 方法。要访问 Web Components 的命令式 API,你需要使用 `ref` 直接与 DOM 节点进行交互。如果你使用的是第三方 Web Components,那么最好的解决方案是编写 React 组件包装该 Web Components。
>
> Events emitted by a Web Component may not properly propagate through a React render tree.
> You will need to manually attach event handlers to handle these events within your React components.
> Web Components 触发的事件可能无法通过 React 渲染树正确的传递。
> 你需要在 React 组件中手动添加事件处理器来处理这些事件。
One common confusion is that Web Components use "class" instead of "className".
常见的误区是在 Web Components 中使用的是 `class` 而非 `className`

```javascript
function BrickFlipbox() {
Expand All @@ -40,7 +40,7 @@ function BrickFlipbox() {
}
```

## Using React in your Web Components {#using-react-in-your-web-components}
## 在 Web Components 中使用 React {#using-react-in-your-web-components}

```javascript
class XSearch extends HTMLElement {
Expand All @@ -56,7 +56,7 @@ class XSearch extends HTMLElement {
customElements.define('x-search', XSearch);
```

>Note:
> 注意:
>
>This code **will not** work if you transform classes with Babel. See [this issue](https://github.com/w3c/webcomponents/issues/587) for the discussion.
>Include the [custom-elements-es5-adapter](https://github.com/webcomponents/webcomponentsjs#custom-elements-es5-adapterjs) before you load your web components to fix this issue.
> 如果使用 Babel 来转换 class,此代码将**不会**起作用。请查阅该 [issue](https://github.com/w3c/webcomponents/issues/587) 了解相关讨论。
> 在加载 Web Components 前请引入 [custom-elements-es5-adapter.js](https://github.com/webcomponents/webcomponentsjs#custom-elements-es5-adapterjs) 来解决该 issue

0 comments on commit 9301bda

Please sign in to comment.