From 3a07220c65b991d5b86a456a3b98d3d08594f9e1 Mon Sep 17 00:00:00 2001 From: ncnthien Date: Fri, 17 Sep 2021 22:06:40 +0700 Subject: [PATCH 1/3] translate integrating-with-other-libraries page in advanced guides --- .../docs/integrating-with-other-libraries.md | 130 +++++++++--------- 1 file changed, 65 insertions(+), 65 deletions(-) diff --git a/content/docs/integrating-with-other-libraries.md b/content/docs/integrating-with-other-libraries.md index 5bc8b2570..d8daed748 100644 --- a/content/docs/integrating-with-other-libraries.md +++ b/content/docs/integrating-with-other-libraries.md @@ -1,26 +1,26 @@ --- id: integrating-with-other-libraries -title: Integrating with Other Libraries +title: Tích hợp các thư viện bên ngoài permalink: docs/integrating-with-other-libraries.html --- -React can be used in any web application. It can be embedded in other applications and, with a little care, other applications can be embedded in React. This guide will examine some of the more common use cases, focusing on integration with [jQuery](https://jquery.com/) and [Backbone](https://backbonejs.org/), but the same ideas can be applied to integrating components with any existing code. +React có thể được sử dụng trong bất kỳ app web nào. Nó có thể được nhúng vào các app khác, và ngược lại, những app khác cũng có thể được nhúng vào trong React. Bài viết này sẽ đi vào một vài trường hợp điển hình, tập trung vào việc tích hợp [jQuery](https://jquery.com/) và [Backbone](https://backbonejs.org/), nhưng với cách làm tương tự có thể được áp dụng để tích hợp components với bất kỳ loại code khác. -## Integrating with DOM Manipulation Plugins {#integrating-with-dom-manipulation-plugins} +## Tích hợp Plugins thao tác DOM {#integrating-with-dom-manipulation-plugins} -React is unaware of changes made to the DOM outside of React. It determines updates based on its own internal representation, and if the same DOM nodes are manipulated by another library, React gets confused and has no way to recover. +React không nhận biết được những sự thay đổi của DOM nếu DOM được tác động từ bên ngoài. Việc quyết định update hay không sẽ dựa trên chính những thành phần đại diện bên trong nó, và nếu những DOM node này được thay đổi bởi một thứ viện khác, React sẽ cảm thấy khó hiểu và không có cách nào để xử lý. -This does not mean it is impossible or even necessarily difficult to combine React with other ways of affecting the DOM, you just have to be mindful of what each is doing. +Điều này không có nghĩa là không thể hoặc rất khó để kết hợp React với những cách thao tác DOM khác, bạn chỉ cần chú ý mỗi phần riêng biệt sẽ làm gì. -The easiest way to avoid conflicts is to prevent the React component from updating. You can do this by rendering elements that React has no reason to update, like an empty `
`. +Cách dễ nhất để tránh xung đột là ngăn chặn React component khỏi việc update. Bạn có thể làm việc này bằng cách render các element mà React không có lý do gì để update, ví dụ như một thẻ div trống `
`. -### How to Approach the Problem {#how-to-approach-the-problem} +### Tiếp cận vấn đề {#how-to-approach-the-problem} -To demonstrate this, let's sketch out a wrapper for a generic jQuery plugin. +Để chứng minh điều trên, hãy bắt đầu với một đoạn wrapper của plugin jQuery -We will attach a [ref](/docs/refs-and-the-dom.html) to the root DOM element. Inside `componentDidMount`, we will get a reference to it so we can pass it to the jQuery plugin. +Chúng ta sẽ gán [ref](/docs/refs-and-the-dom.html) vào phần tử root DOM. Bên trong `componentDidMount`, chúng ta sẽ tham chiếu đến nó và có thể truyền nó đến plugin jQuery. -To prevent React from touching the DOM after mounting, we will return an empty `
` from the `render()` method. The `
` element has no properties or children, so React has no reason to update it, leaving the jQuery plugin free to manage that part of the DOM: +Để ngăn chặn React động vào DOM sau khi được mount, chúng ta sẽ trả về một `
` trống từ method `render()`. Bởi vì phần tử `
` không có thuộc tính hay phần tử con, nên React sẽ không có lí do gì để update nó, để cho jQuery plugin được thoải mái quản lý phần đó của DOM: ```js{3,4,8,12} class SomePlugin extends React.Component { @@ -39,21 +39,21 @@ class SomePlugin extends React.Component { } ``` -Note that we defined both `componentDidMount` and `componentWillUnmount` [lifecycle methods](/docs/react-component.html#the-component-lifecycle). Many jQuery plugins attach event listeners to the DOM so it's important to detach them in `componentWillUnmount`. If the plugin does not provide a method for cleanup, you will probably have to provide your own, remembering to remove any event listeners the plugin registered to prevent memory leaks. +Chú ý rằng chúng ta sử dụng [phương thức vòng đời](/docs/react-component.html#the-component-lifecycle) `componentDidMount` và `componentWillUnmount`. Nhiều plugin jQuery chứa các event listener của DOM nên việc tháo những event listener trong `componentWillUnmount` là quan trọng. Nếu những plugin này không cung cấp method cho việc tháo gỡ, có thể bạn phải tự mình làm việc đó, hãy nhớ xóa hết các event listener của plugin để ngăn chặn tràn bộ nhớ. -### Integrating with jQuery Chosen Plugin {#integrating-with-jquery-chosen-plugin} +### Tích hợp với một plugin jQuery cụ thể {#integrating-with-jquery-chosen-plugin} -For a more concrete example of these concepts, let's write a minimal wrapper for the plugin [Chosen](https://harvesthq.github.io/chosen/), which augments ``. ->**Note:** +>**Lưu ý:** > ->Just because it's possible, doesn't mean that it's the best approach for React apps. We encourage you to use React components when you can. React components are easier to reuse in React applications, and often provide more control over their behavior and appearance. +>Chỉ vì điều này có thể, không có nghĩa rằng đó là cách tiếp cận tốt nhất của các app React. Chúng tôi khuyến khích bạn sử dụng các component React khi có thể. Các component React dễ dàng được tái sử dụng hơn trong các app React, và thường cung cấp nhiều hơn khả năng điều khiển các hành động và hiển thị của nó. -First, let's look at what Chosen does to the DOM. +Đầu tiên, hãy xem plugin Chosen làm gì với DOM. -If you call it on a ``. Then it fires jQuery events to notify us about the changes. +Nếu bạn gọi nó trên một DOM node ``. Sau đó nó kích hoạt sự kiện jQuery để thông báo chúng ta về sự thay đổi. -Let's say that this is the API we're striving for with our `` wrapper React component: +Hãy cho rằng đây là API chúng ta đang sử dụng với component wrapper `` ```js function Example() { @@ -67,9 +67,9 @@ function Example() { } ``` -We will implement it as an [uncontrolled component](/docs/uncontrolled-components.html) for simplicity. +Chúng ta sẽ đơn giản thực thi nó như là một [uncontrolled component](/docs/uncontrolled-components.html). -First, we will create an empty component with a `render()` method where we return `` được bọc trong `
`: ```js{4,5} class Chosen extends React.Component { @@ -85,9 +85,9 @@ class Chosen extends React.Component { } ``` -Notice how we wrapped `` node we passed to it. However, as far as React is concerned, `
` always only has a single child. This is how we ensure that React updates won't conflict with the extra DOM node appended by Chosen. It is important that if you modify the DOM outside of React flow, you must ensure React doesn't have a reason to touch those DOM nodes. +Để ý cách chúng ta bọc `` chúng ta truyền vào. Tuy nhiên, theo như những gì React nhận biết, `
` chỉ luôn luôn có một phần tử con. Đây là cách chúng ta chắc chắn rằng những update sẽ không gây xung đột với phần tử DOM được thêm bởi Chosen. Điều đó là quan trọng nếu bạn chỉnh sửa DOM bên ngoài React, bạn phải chắc chắn rằng React không có lí do động vào những DOM đó. -Next, we will implement the lifecycle methods. We need to initialize Chosen with the ref to the `` bên trong `componentDidMount`, và xóa nó đi trong `componentWillUnmount`: ```js{2,3,7} componentDidMount() { @@ -100,17 +100,17 @@ componentWillUnmount() { } ``` -[**Try it on CodePen**](https://codepen.io/gaearon/pen/qmqeQx?editors=0010) +[**Thử trên Codepen**](https://codepen.io/gaearon/pen/qmqeQx?editors=0010) -Note that React assigns no special meaning to the `this.el` field. It only works because we have previously assigned this field from a `ref` in the `render()` method: +Lưu ý rằng React không gán ý nghĩa đặc biệt nào cho field `this.el`. Nó chỉ hoạt động bởi vì chúng ta đã gán cho nó một `ref` trong method `render()`: ```js ` managed by Chosen. +Chừng này là đủ để cho component của chúng ta render, nhưng chúng ta cũng muốn được thông báo về sự thay đổi giá trị. Để làm việc này, chúng ta sẽ theo dõi sự kiện `change` của jQuery trên ``, but we will also add a `componentDidUpdate()` lifecycle method that notifies Chosen about changes in the children list: +Tài liệu của Chosen bảo rằng chúng ta có thể sử dụng jQuery API `trigger()` để thông báo về những thay đổi trong DOM ban đầu. Chúng ta sẽ để React lo phần update `this.props.children` bên trong `` children managed by React change. +Bằng cách này, Chosen sẽ biết để update DOM của nó khi children ``. +Để có một ví dụ rõ ràng hơn cho những ý tưởng này, hãy làm một wrapper nho nhỏ cho plugin [Chosen](https://harvesthq.github.io/chosen/), một plugin hỗ trợ input ``, nó sẽ đọc các attribute của DOM node ban đầu, ẩn DOM này bằng inline style, và sau đó thêm một DOM node riêng biệt có hiển thị của riêng nó ngay sau ``, nó sẽ đọc các attribute của phần tử DOM ban đầu, ẩn DOM này bằng inline style, và sau đó thêm một phần tử DOM riêng biệt của chính nó ngay sau `` được bọc trong `
`: @@ -85,9 +85,9 @@ class Chosen extends React.Component { } ``` -Để ý cách chúng ta bọc `` chúng ta truyền vào. Tuy nhiên, theo như những gì React nhận biết, `
` chỉ luôn luôn có một phần tử con. Đây là cách chúng ta chắc chắn rằng những update sẽ không gây xung đột với phần tử DOM được thêm bởi Chosen. Điều đó là quan trọng nếu bạn chỉnh sửa DOM bên ngoài React, bạn phải chắc chắn rằng React không có lí do động vào những DOM đó. +Để ý cách chúng ta bọc `` chúng ta truyền vào. Tuy nhiên, theo như những gì React được biết, `
` chỉ luôn luôn có một phần tử con. Đây là cách chúng ta chắc chắn rằng những update sẽ không gây xung đột với phần tử DOM được thêm bởi Chosen. Nên điều quan trọng là nếu bạn chỉnh sửa DOM từ bên ngoài React, bạn phải chắc chắn rằng React không có lí do gì để động vào những DOM đó. -Tiếp theo, chúng ta sẽ cần tiến hành các phương thức lifecycle. Chúng ta cần khởi tạo Chosen gán ref cho `` bên trong `componentDidMount`, sau đó cleanup trong `componentWillUnmount`: ```js{2,3,7} componentDidMount() { @@ -102,15 +102,15 @@ componentWillUnmount() { [**Thử trên Codepen**](https://codepen.io/gaearon/pen/qmqeQx?editors=0010) -Lưu ý rằng React không gán ý nghĩa đặc biệt nào cho field `this.el`. Nó chỉ hoạt động bởi vì chúng ta đã gán cho nó một `ref` trong method `render()`: +Lưu ý rằng React không cho bất kỳ một ý nghĩa đặc biệt nào cho field `this.el`. Nó hoạt động chỉ bởi vì chúng ta đã gán cho nó một `ref` trong method `render()`: ```js ` - thẻ được quản lý bởi Chosen. +Chừng này là đủ để cho component của chúng ta render, nhưng nếu chúng ta cũng muốn được thông báo về sự thay đổi của giá trị thì sao. Để làm việc này, chúng ta sẽ theo dõi sự kiện `change` của jQuery trên ``, nhưng chúng ta cũng sẽ thêm method vòng đời `componentDidUpdate()` để thông báo cho Chosen về những thay đổi trong children list: +Tài liệu của Chosen cho rằng chúng ta có thể sử dụng jQuery API `trigger()` để thông báo về những thay đổi trong DOM ban đầu. Chúng ta sẽ để React lo phần update của `this.props.children` bên trong ``. +Để có một ví dụ rõ ràng hơn cho những khái niệm này, hãy làm một wrapper nho nhỏ cho plugin [Chosen](https://harvesthq.github.io/chosen/), một plugin hỗ trợ input ` this.el = el}> @@ -192,7 +192,7 @@ class Chosen extends React.Component { React có thể được thêm vào bên trong các ứng dụng khác nhờ vào sự linh hoạt của [`ReactDOM.render()`](/docs/react-dom.html#render). -Mặc dù React thường được sử dụng ban đầu để thêm một component root vào DOM, `ReactDOM.render()` cũng có thể được gọi nhiều lần cho những phần UI độc lập, ví dụ những thành phần nhỏ như một button, hoặc lớn như một ứng dụng. +Mặc dù React thường được sử dụng ban đầu để thêm một component root vào DOM, `ReactDOM.render()` cũng có thể được gọi nhiều lần với những phần UI độc lập, ví dụ những thành phần nhỏ như một button, hoặc lớn như một ứng dụng. Thực tế, đây là chính xác cách mà React được sử dụng trong Facebook. Nó để chúng tôi viết từng phần nhỏ của ứng dụng bằng React, và kết hợp chúng với những template được tạo bởi server có sẵn của chúng tôi và những đoạn code khác trên phần client. @@ -399,7 +399,7 @@ function connectToBackboneModel(WrappedComponent) { } ``` -Để chứng mình làm sao sử dụng nó, chúng ta sẽ connect một component `NameInput` đến một Backbone model, và update attribute `firstName` của nó mỗi khi input thay đổi: +Để chứng minh làm sao sử dụng nó, chúng ta sẽ connect một component `NameInput` đến một Backbone model, và update attribute `firstName` của nó mỗi khi input thay đổi: ```js{4,6,11,15,19-21} function NameInput(props) {