Cách thêm thẻ html vào chuỗi trong phản ứng

Có một thư mục khác trong thư mục gốc của dự án React của bạn, được đặt tên là "public". Trong thư mục này, có một tệp index.html

Bạn sẽ nhận thấy một

trong phần thân của tập tin này. Đây là nơi ứng dụng React của chúng ta sẽ được hiển thị

Thí dụ

Hiển thị một đoạn bên trong một phần tử có id là "root"

ReactDOM.render(

Hello

, document.getElementById('root'));

Kết quả được hiển thị trong

yếu tố.


  

Chạy ví dụ »

Lưu ý rằng phần tử id không nhất thiết phải được gọi là "root", nhưng đây là quy ước chuẩn



Mã HTML

Mã HTML trong hướng dẫn này sử dụng JSX cho phép bạn viết các thẻ HTML bên trong mã JavaScript

Nếu bạn muốn hiển thị mã HTML lưu trữ dưới dạng một chuỗi trong một biến chuỗi, trước tiên, bạn phải chuyển chuỗi đó sang HTML. Tôi thảo luận về hai cách để chuyển đổi chuỗi thành HTML trong bài viết này

  1. Sử dụng nguy hiểmSetInnerHTML của React
  2. Sử dụng gói npm html-Reac-Parser

Đây là một ví dụ về những gì sẽ xảy ra nếu tôi hiển thị HTML được lưu trữ trong một biến chuỗi. Nội dung hiển thị như nó là. Điều đó tương tự như phương thức InternalText của Javascript

import { useEffect, useState } from "react";
export const StringToHtml = () =>{
  const [html, setHtml] = useState("")
  useEffect(() => {
    setHtml("
Html stored as a string
") }, [html]) return(
{html}
) }

Cách thêm thẻ html vào chuỗi trong phản ứng
Hình 1. Phản ứng kết xuất chuỗi html

Sử dụng nguy hiểmSetInnerHTML của React

Tuy nhiên, React Js cố tình làm điều này. Nó ngăn chặn XSS (kịch bản chéo trang). Do đó, các nhà thiết kế React Js đã đặt tên cho phương thức cho phép bạn phân tích cú pháp một chuỗi thành HTML là DangerlySetInnerHTML. Đây là cách sử dụng nó. Không sử dụng nguy hiểmSetInnerHTML để hiển thị HTML có nguồn gốc từ các nguồn không đáng tin cậy. Chúng có thể chứa XSS nhắm mục tiêu người dùng cuối

import { useEffect, useState } from "react";
export const StringToHtml = () =>{
  const [html, setHtml] = useState("")
  useEffect(() => {
    setHtml("
Html stored as a string
") }, [html]) return(
) }

Cách thêm thẻ html vào chuỗi trong phản ứng
Hình 2. Phản ứng Js một cách nguy hiểmSetInnerHTML

Sử dụng gói npm html-Reac-Parser

Nếu bạn cần nhiều tính năng hơn như hiển thị có điều kiện, nối thêm, thay thế, v.v. , gói NPM html-react-parser có thể xử lý hầu hết chúng

Trong luồng dữ liệu React điển hình, props là cách duy nhất mà các component cha tương tác với các component con của chúng. Để sửa đổi một đứa trẻ, bạn kết xuất lại nó với các đạo cụ mới. Tuy nhiên, có một vài trường hợp bạn cần phải sửa đổi một cách bắt buộc một đứa trẻ bên ngoài luồng dữ liệu thông thường. Đứa trẻ được sửa đổi có thể là một thể hiện của thành phần React hoặc nó có thể là một phần tử DOM. Đối với cả hai trường hợp này, React cung cấp một lối thoát

Khi nào nên sử dụng giới thiệu

Có một vài trường hợp sử dụng tốt cho giới thiệu

  • Quản lý tiêu điểm, lựa chọn văn bản hoặc phát lại phương tiện
  • Kích hoạt hình ảnh động bắt buộc
  • Tích hợp với các thư viện DOM của bên thứ ba

Tránh sử dụng ref cho bất cứ điều gì có thể được thực hiện một cách khai báo

Ví dụ: thay vì hiển thị các phương thức

const node = this.myRef.current;
1 và
const node = this.myRef.current;
2 trên thành phần
const node = this.myRef.current;
3, hãy chuyển một prop4_______4 cho nó

Đừng lạm dụng giới thiệu

Xu hướng đầu tiên của bạn có thể là sử dụng các lượt giới thiệu để “làm cho mọi thứ xảy ra” trong ứng dụng của bạn. Nếu đây là trường hợp, hãy dành một chút thời gian và suy nghĩ chín chắn hơn về nơi nên sở hữu trạng thái trong hệ thống phân cấp thành phần. Thông thường, rõ ràng là vị trí thích hợp để “sở hữu” trạng thái đó nằm ở cấp cao hơn trong hệ thống phân cấp. Xem hướng dẫn Nâng trạng thái lên để biết ví dụ về điều này

Ghi chú

Các ví dụ bên dưới đã được cập nhật để sử dụng API

const node = this.myRef.current;
5 được giới thiệu trong React 16. 3. Nếu bạn đang sử dụng bản phát hành trước của React, chúng tôi khuyên bạn nên sử dụng thay thế

Tạo giới thiệu

Các tham chiếu được tạo bằng cách sử dụng

const node = this.myRef.current;
5 và được đính kèm với các phần tử React thông qua thuộc tính
const node = this.myRef.current;
7. Các tham chiếu thường được gán cho một thuộc tính thể hiện khi một thành phần được xây dựng để chúng có thể được tham chiếu trong toàn bộ thành phần

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.myRef = React.createRef();  }
  render() {
    return <div ref={this.myRef} />;  }
}

Truy cập giới thiệu

Khi một tham chiếu được chuyển đến một phần tử trong

const node = this.myRef.current;
8, một tham chiếu tới nút sẽ có thể truy cập được tại thuộc tính
const node = this.myRef.current;
9 của tham chiếu

const node = this.myRef.current;

Giá trị của ref khác nhau tùy thuộc vào loại nút

  • Khi thuộc tính
    const node = this.myRef.current;
    7 được sử dụng trên một phần tử HTML, thì ___________7 được tạo trong hàm tạo với ______4_______5 sẽ nhận phần tử DOM bên dưới làm thuộc tính ________9 của nó
  • Khi thuộc tính
    const node = this.myRef.current;
    7 được sử dụng trên thành phần lớp tùy chỉnh, đối tượng
    const node = this.myRef.current;
    7 nhận thể hiện được gắn kết của thành phần dưới dạng
    const node = this.myRef.current;
    9 của nó
  • Bạn không thể sử dụng thuộc tính
    const node = this.myRef.current;
    7 trên các thành phần chức năng vì chúng không có phiên bản

Các ví dụ dưới đây chứng minh sự khác biệt

Thêm một tham chiếu vào một phần tử DOM

Mã này sử dụng

const node = this.myRef.current;
7 để lưu trữ tham chiếu đến nút DOM

class CustomTextInput extends React.Component {
  constructor(props) {
    super(props);
    // create a ref to store the textInput DOM element
    this.textInput = React.createRef();    this.focusTextInput = this.focusTextInput.bind(this);
  }

  focusTextInput() {
    // Explicitly focus the text input using the raw DOM API
    // Note: we're accessing "current" to get the DOM node
    this.textInput.current.focus();  }

  render() {
    // tell React that we want to associate the  ref
    // with the `textInput` that we created in the constructor
    return (
      <div>
        <input
          type="text"
          ref={this.textInput} />        <input
          type="button"
          value="Focus the text input"
          onClick={this.focusTextInput}
        />
      div>
    );
  }
}

React sẽ gán thuộc tính

const node = this.myRef.current;
9 với phần tử DOM khi thành phần được gắn kết và gán lại cho
class AutoFocusTextInput extends React.Component {
  constructor(props) {
    super(props);
    this.textInput = React.createRef();  }

  componentDidMount() {
    this.textInput.current.focusTextInput();  }

  render() {
    return (
      <CustomTextInput ref={this.textInput} />    );
  }
}
0 khi nó ngắt kết nối. Cập nhật
const node = this.myRef.current;
7 xảy ra trước các phương thức vòng đời của
class AutoFocusTextInput extends React.Component {
  constructor(props) {
    super(props);
    this.textInput = React.createRef();  }

  componentDidMount() {
    this.textInput.current.focusTextInput();  }

  render() {
    return (
      <CustomTextInput ref={this.textInput} />    );
  }
}
2 hoặc
class AutoFocusTextInput extends React.Component {
  constructor(props) {
    super(props);
    this.textInput = React.createRef();  }

  componentDidMount() {
    this.textInput.current.focusTextInput();  }

  render() {
    return (
      <CustomTextInput ref={this.textInput} />    );
  }
}
3

Thêm một tham chiếu vào một thành phần lớp

Nếu chúng tôi muốn bọc

class AutoFocusTextInput extends React.Component {
  constructor(props) {
    super(props);
    this.textInput = React.createRef();  }

  componentDidMount() {
    this.textInput.current.focusTextInput();  }

  render() {
    return (
      <CustomTextInput ref={this.textInput} />    );
  }
}
4 ở trên để mô phỏng nó được nhấp ngay sau khi gắn, chúng tôi có thể sử dụng một ref để có quyền truy cập vào đầu vào tùy chỉnh và gọi phương thức
class AutoFocusTextInput extends React.Component {
  constructor(props) {
    super(props);
    this.textInput = React.createRef();  }

  componentDidMount() {
    this.textInput.current.focusTextInput();  }

  render() {
    return (
      <CustomTextInput ref={this.textInput} />    );
  }
}
5 của nó theo cách thủ công

class AutoFocusTextInput extends React.Component {
  constructor(props) {
    super(props);
    this.textInput = React.createRef();  }

  componentDidMount() {
    this.textInput.current.focusTextInput();  }

  render() {
    return (
      <CustomTextInput ref={this.textInput} />    );
  }
}

Lưu ý rằng điều này chỉ hoạt động nếu

class AutoFocusTextInput extends React.Component {
  constructor(props) {
    super(props);
    this.textInput = React.createRef();  }

  componentDidMount() {
    this.textInput.current.focusTextInput();  }

  render() {
    return (
      <CustomTextInput ref={this.textInput} />    );
  }
}
4 được khai báo là một lớp

class CustomTextInput extends React.Component {  // ...
}

Tham chiếu và các thành phần chức năng

Theo mặc định, bạn không thể sử dụng thuộc tính

const node = this.myRef.current;
7 trên các thành phần chức năng vì chúng không có phiên bản

function MyFunctionComponent() {  return <input />;
}

class Parent extends React.Component {
  constructor(props) {
    super(props);
    this.textInput = React.createRef();  }
  render() {
    // This will *not* work!
    return (
      <MyFunctionComponent ref={this.textInput} />    );
  }
}

Nếu bạn muốn cho phép mọi người lấy

const node = this.myRef.current;
7 cho thành phần chức năng của mình, bạn có thể sử dụng
const node = this.myRef.current;
0 (có thể kết hợp với ) hoặc bạn có thể chuyển đổi thành phần đó thành một lớp

Tuy nhiên, bạn có thể sử dụng thuộc tính

const node = this.myRef.current;
7 bên trong một thành phần chức năng miễn là bạn tham chiếu đến một thành phần DOM hoặc một thành phần lớp

function CustomTextInput(props) {
  // textInput must be declared here so the ref can refer to it  const textInput = useRef(null);  
  function handleClick() {
    textInput.current.focus();  }

  return (
    <div>
      <input
        type="text"
        ref={textInput} />      <input
        type="button"
        value="Focus the text input"
        onClick={handleClick}
      />
    div>
  );
}

Hiển thị tham chiếu DOM cho các thành phần gốc

Trong một số ít trường hợp, bạn có thể muốn có quyền truy cập vào nút DOM của một đứa trẻ từ một thành phần cha. Điều này thường không được khuyến nghị vì nó phá vỡ sự đóng gói thành phần, nhưng đôi khi nó có thể hữu ích để kích hoạt tiêu điểm hoặc đo kích thước hoặc vị trí của nút DOM con

Mặc dù bạn có thể, nhưng đây không phải là một giải pháp lý tưởng, vì bạn sẽ chỉ nhận được một phiên bản thành phần chứ không phải nút DOM. Ngoài ra, điều này sẽ không hoạt động với các thành phần chức năng

Nếu bạn sử dụng React 16. 3 trở lên, chúng tôi khuyên bạn nên sử dụng chuyển tiếp giới thiệu cho những trường hợp này. Chuyển tiếp tham chiếu cho phép các thành phần chọn tham gia hiển thị bất kỳ tham chiếu nào của thành phần con là của riêng chúng. Bạn có thể tìm thấy một ví dụ chi tiết về cách hiển thị nút DOM của một đứa trẻ cho một thành phần cha mẹ

Nếu bạn sử dụng React 16. 2 trở xuống hoặc nếu bạn cần linh hoạt hơn so với tính năng được cung cấp bởi chuyển tiếp giới thiệu, bạn có thể sử dụng phương pháp thay thế này và chuyển một giới thiệu rõ ràng dưới dạng chỗ dựa có tên khác

Khi có thể, chúng tôi khuyên bạn không nên để lộ các nút DOM, nhưng nó có thể là một lối thoát hiểm hữu ích. Lưu ý rằng phương pháp này yêu cầu bạn thêm một số mã vào thành phần con. Nếu bạn hoàn toàn không kiểm soát được việc triển khai thành phần con, tùy chọn cuối cùng của bạn là sử dụng , nhưng nó không được khuyến khích và không dùng nữa trong

Giới thiệu gọi lại

React cũng hỗ trợ một cách khác để đặt giới thiệu được gọi là "gọi lại giới thiệu", cho phép kiểm soát chi tiết hơn khi đặt và bỏ đặt giới thiệu.

Thay vì truyền một thuộc tính

const node = this.myRef.current;
7 được tạo bởi
class CustomTextInput extends React.Component {  // ...
}
5, bạn truyền một hàm. Hàm nhận thể hiện thành phần React hoặc phần tử HTML DOM làm đối số của nó, có thể được lưu trữ và truy cập ở nơi khác

Ví dụ dưới đây triển khai một mẫu chung. sử dụng hàm gọi lại

const node = this.myRef.current;
7 để lưu trữ tham chiếu đến nút DOM trong thuộc tính cá thể

class CustomTextInput extends React.Component {
  constructor(props) {
    super(props);

    this.textInput = null;
    this.setTextInputRef = element => {      this.textInput = element;    };
    this.focusTextInput = () => {      // Focus the text input using the raw DOM API      if (this.textInput) this.textInput.focus();    };  }

  componentDidMount() {
    // autofocus the input on mount
    this.focusTextInput();  }

  render() {
    // Use the `ref` callback to store a reference to the text input DOM
    // element in an instance field (for example, this.textInput).
    return (
      <div>
        <input
          type="text"
          ref={this.setTextInputRef}        />
        <input
          type="button"
          value="Focus the text input"
          onClick={this.focusTextInput}        />
      div>
    );
  }
}

React sẽ gọi hàm gọi lại

const node = this.myRef.current;
7 với phần tử DOM khi thành phần này được gắn kết và gọi nó bằng
class AutoFocusTextInput extends React.Component {
  constructor(props) {
    super(props);
    this.textInput = React.createRef();  }

  componentDidMount() {
    this.textInput.current.focusTextInput();  }

  render() {
    return (
      <CustomTextInput ref={this.textInput} />    );
  }
}
0 khi nó ngắt kết nối. Các giới thiệu được đảm bảo được cập nhật trước các vụ hỏa hoạn
class AutoFocusTextInput extends React.Component {
  constructor(props) {
    super(props);
    this.textInput = React.createRef();  }

  componentDidMount() {
    this.textInput.current.focusTextInput();  }

  render() {
    return (
      <CustomTextInput ref={this.textInput} />    );
  }
}
2 hoặc
class AutoFocusTextInput extends React.Component {
  constructor(props) {
    super(props);
    this.textInput = React.createRef();  }

  componentDidMount() {
    this.textInput.current.focusTextInput();  }

  render() {
    return (
      <CustomTextInput ref={this.textInput} />    );
  }
}
3

Bạn có thể chuyển các tham chiếu gọi lại giữa các thành phần như bạn có thể làm với các tham chiếu đối tượng được tạo bằng

const node = this.myRef.current;
5

function CustomTextInput(props) {
  return (
    <div>
      <input ref={props.inputRef} />    div>
  );
}

class Parent extends React.Component {
  render() {
    return (
      <CustomTextInput
        inputRef={el => this.inputElement = el}      />
    );
  }
}

Trong ví dụ trên,

function MyFunctionComponent() {  return <input />;
}

class Parent extends React.Component {
  constructor(props) {
    super(props);
    this.textInput = React.createRef();  }
  render() {
    // This will *not* work!
    return (
      <MyFunctionComponent ref={this.textInput} />    );
  }
}
2 chuyển cuộc gọi lại ref của nó dưới dạng một giá trị
function MyFunctionComponent() {  return <input />;
}

class Parent extends React.Component {
  constructor(props) {
    super(props);
    this.textInput = React.createRef();  }
  render() {
    // This will *not* work!
    return (
      <MyFunctionComponent ref={this.textInput} />    );
  }
}
3 cho
class AutoFocusTextInput extends React.Component {
  constructor(props) {
    super(props);
    this.textInput = React.createRef();  }

  componentDidMount() {
    this.textInput.current.focusTextInput();  }

  render() {
    return (
      <CustomTextInput ref={this.textInput} />    );
  }
}
4 và
class AutoFocusTextInput extends React.Component {
  constructor(props) {
    super(props);
    this.textInput = React.createRef();  }

  componentDidMount() {
    this.textInput.current.focusTextInput();  }

  render() {
    return (
      <CustomTextInput ref={this.textInput} />    );
  }
}
4 chuyển chức năng tương tự như một thuộc tính
const node = this.myRef.current;
7 đặc biệt cho
function MyFunctionComponent() {  return <input />;
}

class Parent extends React.Component {
  constructor(props) {
    super(props);
    this.textInput = React.createRef();  }
  render() {
    // This will *not* work!
    return (
      <MyFunctionComponent ref={this.textInput} />    );
  }
}
7. Kết quả là,
function MyFunctionComponent() {  return <input />;
}

class Parent extends React.Component {
  constructor(props) {
    super(props);
    this.textInput = React.createRef();  }
  render() {
    // This will *not* work!
    return (
      <MyFunctionComponent ref={this.textInput} />    );
  }
}
8 trong
function MyFunctionComponent() {  return <input />;
}

class Parent extends React.Component {
  constructor(props) {
    super(props);
    this.textInput = React.createRef();  }
  render() {
    // This will *not* work!
    return (
      <MyFunctionComponent ref={this.textInput} />    );
  }
}
2 sẽ được đặt thành nút DOM tương ứng với phần tử
function MyFunctionComponent() {  return <input />;
}

class Parent extends React.Component {
  constructor(props) {
    super(props);
    this.textInput = React.createRef();  }
  render() {
    // This will *not* work!
    return (
      <MyFunctionComponent ref={this.textInput} />    );
  }
}
7 trong
class AutoFocusTextInput extends React.Component {
  constructor(props) {
    super(props);
    this.textInput = React.createRef();  }

  componentDidMount() {
    this.textInput.current.focusTextInput();  }

  render() {
    return (
      <CustomTextInput ref={this.textInput} />    );
  }
}
4

API kế thừa. Tham chiếu chuỗi

Nếu bạn đã làm việc với React trước đây, bạn có thể quen thuộc với API cũ hơn trong đó thuộc tính

const node = this.myRef.current;
7 là một chuỗi, chẳng hạn như
function CustomTextInput(props) {
  // textInput must be declared here so the ref can refer to it  const textInput = useRef(null);  
  function handleClick() {
    textInput.current.focus();  }

  return (
    <div>
      <input
        type="text"
        ref={textInput} />      <input
        type="button"
        value="Focus the text input"
        onClick={handleClick}
      />
    div>
  );
}
3 và nút DOM được truy cập là
function CustomTextInput(props) {
  // textInput must be declared here so the ref can refer to it  const textInput = useRef(null);  
  function handleClick() {
    textInput.current.focus();  }

  return (
    <div>
      <input
        type="text"
        ref={textInput} />      <input
        type="button"
        value="Focus the text input"
        onClick={handleClick}
      />
    div>
  );
}
4. Chúng tôi khuyên bạn không nên làm như vậy vì tham chiếu chuỗi có , được coi là di sản và có khả năng bị xóa trong một trong các bản phát hành trong tương lai

Ghi chú

Nếu bạn hiện đang sử dụng

function CustomTextInput(props) {
  // textInput must be declared here so the ref can refer to it  const textInput = useRef(null);  
  function handleClick() {
    textInput.current.focus();  }

  return (
    <div>
      <input
        type="text"
        ref={textInput} />      <input
        type="button"
        value="Focus the text input"
        onClick={handleClick}
      />
    div>
  );
}
4 để truy cập giới thiệu, chúng tôi khuyên bạn nên sử dụng hoặc thay thế

Hãy cẩn thận với giới thiệu gọi lại

Nếu hàm gọi lại

const node = this.myRef.current;
7 được định nghĩa là một hàm nội tuyến, thì hàm này sẽ được gọi hai lần trong quá trình cập nhật, lần đầu tiên với
class AutoFocusTextInput extends React.Component {
  constructor(props) {
    super(props);
    this.textInput = React.createRef();  }

  componentDidMount() {
    this.textInput.current.focusTextInput();  }

  render() {
    return (
      <CustomTextInput ref={this.textInput} />    );
  }
}
0 và sau đó một lần nữa với phần tử DOM. Điều này là do một phiên bản mới của chức năng được tạo với mỗi kết xuất, vì vậy React cần xóa ref cũ và thiết lập cái mới. Bạn có thể tránh điều này bằng cách định nghĩa hàm gọi lại
const node = this.myRef.current;
7 như một phương thức ràng buộc trên lớp, nhưng lưu ý rằng nó không quan trọng trong hầu hết các trường hợp

Làm cách nào để hiển thị các thẻ HTML trong React?

Mục tiêu của React theo nhiều cách là hiển thị HTML trong một trang web. React kết xuất HTML cho trang web bằng cách sử dụng chức năng có tên là ReactDOM. kết xuất() .

Làm cách nào để thêm HTML vào React js?

Chỉ cần sử dụng mẫu ứng dụng tạo phản ứng và những thứ html cơ bản (head, meta) đã sẵn sàng, Chỉ cần sửa đổi thư mục src để đáp ứng nhu cầu của bạn. for example the index. js would be something like this, import React from 'react'; import './App.

Chúng ta có thể sử dụng các thẻ HTML trong phản ứng JS không?

JSX cho phép chúng ta viết các phần tử HTML bằng JavaScript và đặt chúng vào DOM mà không cần bất kỳ phương thức createElement() và/hoặc appendChild() nào. JSX chuyển đổi các thẻ HTML thành các phần tử phản ứng .

Làm cách nào để chuyển đổi HTML thành chuỗi trong React?

Sử dụng nguy hiểmSetInnerHTML của React . Do đó, các nhà thiết kế React Js đã đặt tên cho phương thức cho phép bạn phân tích cú pháp một chuỗi thành HTML là DangerlySetInnerHTML. Đây là cách sử dụng nó. Không sử dụng nguy hiểmSetInnerHTML để hiển thị HTML có nguồn gốc từ các nguồn không đáng tin cậy.