search

Hướng dẫn how to import html file in react js - cách nhập tệp html trong js phản ứng

1 năms trước
Trả lời: 0
Lượt xem: 181

Tôi muốn nhập tệp HTML vào thành phần ReactHTML file into a React component

Show

Hướng dẫn how to import html file in react js - cách nhập tệp html trong js phản ứng

peft.html

<!DOCTYPE html>
<html>
  <head>
    <title>Page Title</title>
  </head>
  <body>
    <h2>This is a Heading</h2>
    <p>This is a paragraph.</p>
  </body>
</html>

index.js

import perf from perf.html

class Index extends React.Component {
   render(){
      return (
         <iframe src="perf"></iframe>   /* like this */
         <iframe src="./perf"></iframe> /* or like this */
         /* or like any possible way */
      );
   }
}
export default Index;

Vì vậy, trong trường hợp của tôi, tôi cần nhập tệp HTML cục bộ và sử dụng nó nhưng tôi đang gặp lỗi:

Uncaught (trong Promise) Lỗi: Mô -đun Parse Không thành công: C: \ Người dùng .... \ Target.html Mã thông báo bất ngờ (1: 0) Bạn có thể cần một trình tải thích hợp để xử lý loại tệp này.

Bất kỳ ý tưởng? Làm thế nào để tải một tệp HTML bên trong thành phần React? Làm thế nào để thêm một trình tải thích hợp để xử lý loại tệp này? Bất cứ điều gì?

Tôi thấy giải pháp này là hợp lý nhất:

var __html = require('./template.html');
var template = { __html: __html };

React.module.exports = React.createClass({
  render: function() {
    return(
      <div dangerouslySetInnerHTML={template} />
    );
  }
});

Nhưng tôi không thể áp dụng nó vì tôi đang gặp lỗi:

Uncaught (in promise) Error: Module parse failed: C:\Users\....\target.html Unexpected token (1:0) You may need an appropriate loader to handle this file type. 
| <!DOCTYPE html> 
| <html xmlns="w3.org/1999/xhtml">; 
| <head><title>

Nếu bạn muốn bao gồm HTML tĩnh trong ReactJS. Bạn cần sử dụng plugin HTML-Load-Loader nếu bạn đang sử dụng WebPack để phục vụ mã React của mình.

Trước hết bạn cần để cài đặt plugin HTML-Loader. Mở thiết bị đầu cuối của bạn và chạy lệnh sau:

npm install --save-dev html-loader

Sau đó mở tệp cấu hình webpack của bạn và thêm mã sau:

{
  modules: {
    loaders: [
      { test: /\.html$/, loader: 'html-loader' }
    ]
  }
}

Bây giờ, trong mã React của bạn làm sau các thay đổi:

var htmlContent = require('path/to/html/file.html');

// or you can also write
// import htmlContent from 'path/to/html/file.html');


export default function MyComponent() {
    return (
        <div dangerouslySetInnerHTML={ {__html: htmlContent} } />
    );
}

Đó là nó. Bây giờ bạn có thể sử dụng các tệp HTML tĩnh để tải các tệp HTML của bạn trong React.

Tôi muốn nhập tệp HTML vào thành phần ReactHTML file into a React component

Hướng dẫn how to import html file in react js - cách nhập tệp html trong js phản ứng

peft.html

<!DOCTYPE html>
<html>
  <head>
    <title>Page Title</title>
  </head>
  <body>
    <h2>This is a Heading</h2>
    <p>This is a paragraph.</p>
  </body>
</html>

index.js

import perf from perf.html

class Index extends React.Component {
   render(){
      return (
         <iframe src="perf"></iframe>   /* like this */
         <iframe src="./perf"></iframe> /* or like this */
         /* or like any possible way */
      );
   }
}
export default Index;

Vì vậy, trong trường hợp của tôi, tôi cần nhập tệp HTML cục bộ và sử dụng nó nhưng tôi đang gặp lỗi:
but I'm getting the error:

Uncaught (trong lời hứa) Lỗi: Mô -đun phân tích cú pháp không thành công: C: \ Người dùng.
C:\Users….\target.html
Unexpected token (1:0) You may need an appropriate loader to handle
this file type.

Bất kỳ ý tưởng? Làm thế nào để tải một tệp HTML bên trong thành phần React? Làm thế nào để thêm một trình tải thích hợp để xử lý loại tệp này? Bất cứ điều gì?
How to load an HTML file inside of a React Component?
How to add an appropriate loader to handle this file type?
Anything?

Tôi thấy giải pháp này là hợp lý nhất:

var __html = require('./template.html');
var template = { __html: __html };

React.module.exports = React.createClass({
  render: function() {
    return(
      <div dangerouslySetInnerHTML={template} />
    );
  }
});

Nhưng tôi không thể áp dụng nó vì tôi đang gặp lỗi:

Uncaught (in promise) Error: Module parse failed: C:\Users\....\target.html Unexpected token (1:0) You may need an appropriate loader to handle this file type. 
| <!DOCTYPE html> 
| <html xmlns="w3.org/1999/xhtml">; 
| <head><title>

Hướng dẫn how to import html file in react js - cách nhập tệp html trong js phản ứng

Tôi có thể nhập tệp HTML trong React không?

Nếu bạn muốn bao gồm HTML tĩnh trong ReactJS. Bạn cần sử dụng plugin HTML-Load-Loader nếu bạn đang sử dụng WebPack để phục vụ mã React của mình. Đó là nó. Bây giờ bạn có thể sử dụng các tệp HTML tĩnh để tải các tệp HTML của bạn trong React.

Làm thế nào tích hợp HTML với React JS?

Thêm phản ứng trong một phút.

Bước 1: Thêm một thùng chứa DOM vào HTML. Đầu tiên, hãy mở trang HTML bạn muốn chỉnh sửa. ....

Nguy hiểmTHERsetInnerhtml Prop

Nếu bạn cố gắng hiển thị một chuỗi HTML trực tiếp bên trong một thành phần, React sẽ tự động vệ sinh nó và hiển thị nó dưới dạng chuỗi đơn giản.

import perf from perf.html

class Index extends React.Component {
   render(){
      return (
         <iframe src="perf"></iframe>   /* like this */
         <iframe src="./perf"></iframe> /* or like this */
         /* or like any possible way */
      );
   }
}
export default Index;
1

JSX

Mã trên sẽ không hiển thị chuỗi "John Doe" trong tiêu đề. Thay vào đó, chuỗi hoàn chỉnh, bao gồm các thẻ H1, sẽ được hiển thị cho người dùng, nhờ phản ứng.

Hướng dẫn how to import html file in react js - cách nhập tệp html trong js phản ứng

Để hiển thị chuỗi là HTML, bạn cần sử dụng prop 

import perf from perf.html

class Index extends React.Component {
   render(){
      return (
         <iframe src="perf"></iframe>   /* like this */
         <iframe src="./perf"></iframe> /* or like this */
         /* or like any possible way */
      );
   }
}
export default Index;
5.
import perf from perf.html

class Index extends React.Component {
   render(){
      return (
         <iframe src="perf"></iframe>   /* like this */
         <iframe src="./perf"></iframe> /* or like this */
         /* or like any possible way */
      );
   }
}
export default Index;
5 prop.

import perf from perf.html

class Index extends React.Component {
   render(){
      return (
         <iframe src="perf"></iframe>   /* like this */
         <iframe src="./perf"></iframe> /* or like this */
         /* or like any possible way */
      );
   }
}
export default Index;
2

JSX

Mã trên sẽ không hiển thị chuỗi "John Doe" trong tiêu đề. Thay vào đó, chuỗi hoàn chỉnh, bao gồm các thẻ H1, sẽ được hiển thị cho người dùng, nhờ phản ứng.

import perf from perf.html

class Index extends React.Component {
   render(){
      return (
         <iframe src="perf"></iframe>   /* like this */
         <iframe src="./perf"></iframe> /* or like this */
         /* or like any possible way */
      );
   }
}
export default Index;
5 prop was built to present and inject DOM formatted content into the frontend. The use of this prop is considered a bad practice, especially when dealing with user inputs. You should consider any user input as unsafe and sanitize it before injecting it into the frontend.

Prop 

import perf from perf.html

class Index extends React.Component {
   render(){
      return (
         <iframe src="perf"></iframe>   /* like this */
         <iframe src="./perf"></iframe> /* or like this */
         /* or like any possible way */
      );
   }
}
export default Index;
5 phải là một đối tượng có khóa 
import perf from perf.html

class Index extends React.Component {
   render(){
      return (
         <iframe src="perf"></iframe>   /* like this */
         <iframe src="./perf"></iframe> /* or like this */
         /* or like any possible way */
      );
   }
}
export default Index;
8 và giá trị của chuỗi HTML. Việc lạm dụng 
import perf from perf.html

class Index extends React.Component {
   render(){
      return (
         <iframe src="perf"></iframe>   /* like this */
         <iframe src="./perf"></iframe> /* or like this */
         /* or like any possible way */
      );
   }
}
export default Index;
5 Prop có thể mở ứng dụng của bạn để các cuộc tấn công kịch bản chéo trang. Do đó, trước khi sử dụng chỗ dựa này, bạn cần đảm bảo rằng chuỗi HTML được vệ sinh đúng cách và đến từ một nguồn đáng tin cậy. Bạn nên tránh chuyển bất kỳ đầu vào do người dùng chấp nhận vào prop 
import perf from perf.html

class Index extends React.Component {
   render(){
      return (
         <iframe src="perf"></iframe>   /* like this */
         <iframe src="./perf"></iframe> /* or like this */
         /* or like any possible way */
      );
   }
}
export default Index;
5.
import perf from perf.html

class Index extends React.Component {
   render(){
      return (
         <iframe src="perf"></iframe>   /* like this */
         <iframe src="./perf"></iframe> /* or like this */
         /* or like any possible way */
      );
   }
}
export default Index;
5 prop must be an object with a key 
import perf from perf.html

class Index extends React.Component {
   render(){
      return (
         <iframe src="perf"></iframe>   /* like this */
         <iframe src="./perf"></iframe> /* or like this */
         /* or like any possible way */
      );
   }
}
export default Index;
8 and value of an HTML string. Misusing the 
import perf from perf.html

class Index extends React.Component {
   render(){
      return (
         <iframe src="perf"></iframe>   /* like this */
         <iframe src="./perf"></iframe> /* or like this */
         /* or like any possible way */
      );
   }
}
export default Index;
5 prop might open up your app to cross-site scripting attacks. Hence, before using this prop, you need to ensure that the HTML string is sanitized properly and coming from a reliable source. You should avoid passing any user-accepted input into the 
import perf from perf.html

class Index extends React.Component {
   render(){
      return (
         <iframe src="perf"></iframe>   /* like this */
         <iframe src="./perf"></iframe> /* or like this */
         /* or like any possible way */
      );
   }
}
export default Index;
5 prop.

Scripting site (XSS)

Các cuộc tấn công của Scripting Scripting (XSS) cho phép người dùng hoặc tin tặc độc hại gửi mã HTML không an toàn vào trang web cho người dùng cuối khác. Điều này cho phép tin tặc truy cập dữ liệu cá nhân như cookie, lưu trữ cục bộ, v.v.

An toàn hơn

Nếu XSS là mối quan tâm chính, bạn có thể sử dụng thư viện bên ngoài như DomPurify để vệ sinh chuỗi HTML trước khi tiêm nó vào DOM bằng 

import perf from perf.html

class Index extends React.Component {
   render(){
      return (
         <iframe src="perf"></iframe>   /* like this */
         <iframe src="./perf"></iframe> /* or like this */
         /* or like any possible way */
      );
   }
}
export default Index;
5 prop.
import perf from perf.html

class Index extends React.Component {
   render(){
      return (
         <iframe src="perf"></iframe>   /* like this */
         <iframe src="./perf"></iframe> /* or like this */
         /* or like any possible way */
      );
   }
}
export default Index;
5 prop.

Để cài đặt thư viện DomPurify, hãy chạy lệnh sau.

Bạn có thể thấy cách sử dụng ví dụ dưới đây.

import perf from perf.html

class Index extends React.Component {
   render(){
      return (
         <iframe src="perf"></iframe>   /* like this */
         <iframe src="./perf"></iframe> /* or like this */
         /* or like any possible way */
      );
   }
}
export default Index;
3

JSX

Bạn cũng có thể định cấu hình 

var __html = require('./template.html');
var template = { __html: __html };

React.module.exports = React.createClass({
  render: function() {
    return(
      <div dangerouslySetInnerHTML={template} />
    );
  }
});
2 để chỉ cho phép các thẻ và thuộc tính cụ thể.
var __html = require('./template.html');
var template = { __html: __html };

React.module.exports = React.createClass({
  render: function() {
    return(
      <div dangerouslySetInnerHTML={template} />
    );
  }
});
2 to allow only specific tags and attributes.

import perf from perf.html

class Index extends React.Component {
   render(){
      return (
         <iframe src="perf"></iframe>   /* like this */
         <iframe src="./perf"></iframe> /* or like this */
         /* or like any possible way */
      );
   }
}
export default Index;
4

JSX

Bạn cũng có thể định cấu hình var __html = require('./template.html'); var template = { __html: __html }; React.module.exports = React.createClass({ render: function() { return( <div dangerouslySetInnerHTML={template} /> ); } }); 2 để chỉ cho phép các thẻ và thuộc tính cụ thể.

Sự kết luận

var __html = require('./template.html');
var template = { __html: __html };

React.module.exports = React.createClass({
  render: function() {
    return(
      <div dangerouslySetInnerHTML={template} />
    );
  }
});
2 or any other library before injecting it into the DOM. Keep in mind that sanitizing large HTML strings on the client side might degrade the app performance; fortunately, 
var __html = require('./template.html');
var template = { __html: __html };

React.module.exports = React.createClass({
  render: function() {
    return(
      <div dangerouslySetInnerHTML={template} />
    );
  }
});
2 can also be used on a NodeJS server, and therefore you should consider sanitizing the content in the backend.

Tôi có thể nhập tệp HTML trong React không?

Nếu bạn muốn bao gồm HTML tĩnh trong ReactJS. Bạn cần sử dụng plugin HTML-Load-Loader nếu bạn đang sử dụng WebPack để phục vụ mã React của mình. Đó là nó. Bây giờ bạn có thể sử dụng các tệp HTML tĩnh để tải các tệp HTML của bạn trong React.you can use static html files to load your html files in react.

Làm thế nào tích hợp HTML với React JS?

Thêm phản ứng trong một phút..
Bước 1: Thêm một thùng chứa DOM vào HTML.Đầu tiên, hãy mở trang HTML bạn muốn chỉnh sửa.....
Bước 2: Thêm thẻ tập lệnh.Tiếp theo, thêm ba thẻ vào trang HTML ngay trước khi thẻ đóng: ....
Bước 3: Tạo một thành phần React.Tạo một tệp có tên Like_Button.js bên cạnh trang HTML của bạn ..

Làm cách nào để nhập tệp vào React?

Để nhập một thành phần từ một tệp khác trong React: Xuất thành phần từ tệp A, ví dụ:Xuất nút chức năng () {} .Import Thành phần trong tệp B dưới dạng nhập {nút} từ '.Export the component from file A , e.g. export function Button() {} . Import the component in file B as import {Button} from './another-file' . Use the imported component in file B .

Làm thế nào để bạn chạy mã HTML trong React?

Mục tiêu của React là theo nhiều cách để hiển thị HTML trong một trang web.React kết xuất HTML lên trang web bằng cách sử dụng một hàm gọi là Reactdom.Render ().using a function called ReactDOM.render() .

programming html Convert to react Html-loader Iframe ReactJS

Bài Viết Liên Quan

Hướng dẫn python requests cert and key - python yêu cầu chứng chỉ và khóa
Hướng dẫn python requests cert and key - python yêu cầu chứng chỉ và khóa

Hướng dẫn what is the use of use keyword in php? - sử dụng từ khóa use trong php là gì?
Hướng dẫn what is the use of use keyword in php? - sử dụng từ khóa use trong php là gì?

Hướng dẫn where do i call js file in html? - Tôi gọi tập tin js trong html ở đâu?
Hướng dẫn where do i call js file in html? - Tôi gọi tập tin js trong html ở đâu?

Share tài khoản pngtree 2023
Share tài khoản pngtree 2023

Hướng dẫn format thời gian javascript
Hướng dẫn format thời gian javascript

Edit link trong excel bị ẩn
Edit link trong excel bị ẩn

Hướng dẫn can we concatenate arrays in python? - chúng ta có thể nối các mảng trong python không?
Hướng dẫn can we concatenate arrays in python? - chúng ta có thể nối các mảng trong python không?

Hướng dẫn python call function with string argument - hàm gọi python với đối số chuỗi
Hướng dẫn python call function with string argument - hàm gọi python với đối số chuỗi

Hướng dẫn php-fpm configuration - cấu hình php-fpm
Hướng dẫn php-fpm configuration - cấu hình php-fpm

Bộ định thời của linux
Bộ định thời của linux

MỚI CẬP NHẬP

Caâu lạc bộ thiện nguyện tiếng anh là gì năm 2024
15 phúts trước . bởi ImmortalBoardroom
File exel bị lỗi không đủ bộ nhớ năm 2024
19 phúts trước . bởi BranchingSchooner
Đề thi đại học môn toán khối b năm 2004 năm 2024
44 phúts trước . bởi AccompanyingReceptor
Bài tập chuyên đề vật lý hạt nhân năm 2024
1 giờs trước . bởi UnassumingSewing
Là viên chức làm gì để phát triển cơ quan năm 2024
1 giờs trước . bởi CunningHelplessness
Bệnh u nang buồng trứng tiếng anh là gì năm 2024
1 giờs trước . bởi PetiteTechnology
Đề kiểm tra 15 phút hóa 9 học kì 1 năm 2024
1 giờs trước . bởi UnreasonableDiscovery
Soạn bài buổi học cuối cùng ngữ văn lớp 6 năm 2024
1 giờs trước . bởi ApoliticalIteration
Cm trong xây dựng tiếng anh là gì năm 2024
2 giờs trước . bởi TwistedAgriculture
Bài tập trắc nghiệm về tính từ sở hữu năm 2024
2 giờs trước . bởi MovableHumility

Xem Nhiều

On the weekend là thì gì năm 2024
6 ngàys trước . bởi FierceCovering
Co số điện thoại di động nào 9 đó năm 2024
4 ngàys trước . bởi SilverTo-day
Himax premium lub ts40 là gì năm 2024
4 ngàys trước . bởi DeepeningMirth
81 2 nguyễn văn giai quận 1 f dakao năm 2024
4 ngàys trước . bởi First-rateMedics
Cách mạng công nghiệp 4.0 cơ hội nào cho startup năm 2024
2 ngàys trước . bởi SinfulBoldness
Các dạng toán chương 1 kinh tế vĩ mô năm 2024
16 giờs trước . bởi HeathenPolling
Cấu trúc tiếng anh là con nghiện của cái gì năm 2024
6 ngàys trước . bởi AspiringBooty
Hoạt động văn hóa văn nghệ là một năm 2024
6 ngàys trước . bởi OutdatedScenery
Khắc phục lỗi phần mềm fot làm bị out game năm 2024
3 ngàys trước . bởi OvercastOutfield
Top phim xuyen khong hay nhat trung quoc năm 2024
3 ngàys trước . bởi BlissfulAbstinence

Chúng tôi

Điều khoản

Trợ giúp

Mạng xã hội

Bản quyền © 2024 Inc.