From 2667b88debb6a1368d7cfaaa695b2ed43d0bf0ee Mon Sep 17 00:00:00 2001 From: bailnl Date: Mon, 1 Apr 2019 17:09:25 +0800 Subject: [PATCH] docs(cn): translate docs/web-components into Chinese (#156) * docs(cn): translate docs/web-components into Chinese * docs(cn): Make sentences more fluent * Update content/docs/web-components.md Co-Authored-By: bailnl * Update web-components.md * Update web-components.md --- content/docs/web-components.md | 24 ++++++++++++------------ 1 file changed, 12 insertions(+), 12 deletions(-) diff --git a/content/docs/web-components.md b/content/docs/web-components.md index cbfcc80e10..34fc48d0d5 100644 --- a/content/docs/web-components.md +++ b/content/docs/web-components.md @@ -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 { @@ -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() { @@ -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 { @@ -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。