Hướng dẫn react render html string from server - phản ứng kết xuất chuỗi html từ máy chủ

Từ PHP, tôi sẽ trả lại HTML này

PHP

$str = "Hello World";
echo json_encode("returnval"=>format_string($str));

function format_string($str){
  return "<b>".$str."</b>";
}

Phản ứng JSX

render () => {
   //returnval = html string returned from php

   return (
     <div>
         {returnval} 
         <div>
              <span>Some data</span>
         </div>
     </div>
   );
}

Các bản in trên

render () => {
   //returnval = html string returned from php

   return (
     <div>
         {returnval} 
         <div>
              <span>Some data</span>
         </div>
     </div>
   );
}

Nhưng tôi muốn các thẻ HTML được thực thi (trong trường hợp này là in đậm)

Tôi không thể viết hàm

render () => {
   //returnval = html string returned from php

   return (
     <div>
         {returnval} 
         <div>
              <span>Some data</span>
         </div>
     </div>
   );
}

Đã hỏi ngày 13 tháng 3 năm 2017 lúc 12:15Mar 13, 2017 at 12:15

2

Tôi không thể viết hàm định dạng_string trong JSX vì một số lý do có cách nào xung quanh điều này không?

Vâng, bạn thực sự có thể, nhưng tôi nghĩ bạn không chắc chắn như thế nào;)

Chỉ cần tạo một hàm trợ giúp sẽ trả về văn bản bên trong thẻ B - nếu nội dung được xác định.b tag - if content is defined.

class MyComponent extends Component {
  ...
  render() {
    {renderContent(content)}
    ...
  }
}

const renderContent = (content) =>
  content && <b>{contnet}</b>

Đã trả lời ngày 13 tháng 3 năm 2017 lúc 12:22Mar 13, 2017 at 12:22

Grzesiekgsgrzesiekgsgrzesiekgs

4632 Huy hiệu bạc11 Huy hiệu đồng2 silver badges11 bronze badges

2

DangerouslySetInnerHTML chủ yếu được sử dụng trong bất kỳ ứng dụng nào bạn cần kết xuất văn bản được định dạng trong một phần tử div. Ngoài ra, bạn có thể sử dụng nó để hiển thị nội dung chính xác như bạn đã định dạng nó.

Đôi khi bạn có thể muốn hiển thị một chuỗi HTML khi sử dụng React. Chuỗi này có thể đến từ các biên tập viên WYSIWYG. Nhưng có một vấn đề - JSX thoát khỏi tất cả các HTML và do đó tất cả các thẻ được hiển thị cho người dùng. Ở đây chúng tôi trình bày 2 giải pháp để khắc phục vấn đề.

Giải pháp 1: render () => { //returnval = html string returned from php return ( <div> {returnval} <div> <span>Some data</span> </div> </div> ); } 6

Trong hầu hết các trường hợp, DangeroSsetInnerHTML nguy hiểm là đủ.

<div dangerouslySetInnerHTML={{__html: '<strong>strong text</strong>'}} />

CẢNH BÁO: Đặt HTML từ mã có rủi ro vì nó dễ dàng vô tình đưa người dùng của bạn vào một cuộc tấn công kịch bản chéo trang (XSS).: Setting HTML from code is risky because it’s easy to inadvertently expose your users to a cross-site scripting (XSS) attack.

Giải pháp 2: render () => { //returnval = html string returned from php return ( <div> {returnval} <div> <span>Some data</span> </div> </div> ); } 7

Thay thế cho nguy hiểm, bạn có thể sử dụng thư viện HTML-React-Parser.

var parse = require('html-react-parser');parse('<div>text</div>');

Nó chuyển đổi một chuỗi HTML thành một hoặc nhiều phần tử phản ứng.

Đối tượng

render () => {
   //returnval = html string returned from php

   return (
     <div>
         {returnval} 
         <div>
              <span>Some data</span>
         </div>
     </div>
   );
}

// ES modules
import * as ReactDOMServer from 'react-dom/server';
// CommonJS
var ReactDOMServer = require('react-dom/server');

Tổng quan

Các phương thức này chỉ có sẵn trong môi trường với các luồng Node.js:environments with Node.js Streams:

• render () => {
     //returnval = html string returned from php
  
     return (
       <div>
           {returnval} 
           <div>
                <span>Some data</span>
           </div>
       </div>
     );
  }
  

  9

• class MyComponent extends Component {
    ...
    render() {
      {renderContent(content)}
      ...
    }
  }
  
  const renderContent = (content) =>
    content && <b>{contnet}</b>
  

  0 (không dùng nữa)

• class MyComponent extends Component {
    ...
    render() {
      {renderContent(content)}
      ...
    }
  }
  
  const renderContent = (content) =>
    content && <b>{contnet}</b>
  

  1

Các phương pháp này chỉ có sẵn trong các môi trường với các luồng web (điều này bao gồm trình duyệt, DENO và một số thời gian chạy cạnh hiện đại):environments with Web Streams (this includes browsers, Deno, and some modern edge runtimes):

• class MyComponent extends Component {
    ...
    render() {
      {renderContent(content)}
      ...
    }
  }
  
  const renderContent = (content) =>
    content && <b>{contnet}</b>
  

  2

Các phương pháp sau đây có thể được sử dụng trong các môi trường mà don don hỗ trợ các luồng:

• class MyComponent extends Component {
    ...
    render() {
      {renderContent(content)}
      ...
    }
  }
  
  const renderContent = (content) =>
    content && <b>{contnet}</b>
  

  3

• class MyComponent extends Component {
    ...
    render() {
      {renderContent(content)}
      ...
    }
  }
  
  const renderContent = (content) =>
    content && <b>{contnet}</b>
  

  4

Tài liệu tham khảo

render () => { //returnval = html string returned from php return ( <div> {returnval} <div> <span>Some data</span> </div> </div> ); } 9

ReactDOMServer.renderToPipeableStream(element, options)

Kết xuất một phần tử phản ứng với HTML ban đầu của nó. Trả về một luồng với phương thức

class MyComponent extends Component {
  ...
  render() {
    {renderContent(content)}
    ...
  }
}

const renderContent = (content) =>
  content && <b>{contnet}</b>

class MyComponent extends Component {
  ...
  render() {
    {renderContent(content)}
    ...
  }
}

const renderContent = (content) =>
  content && <b>{contnet}</b>

class MyComponent extends Component {
  ...
  render() {
    {renderContent(content)}
    ...
  }
}

const renderContent = (content) =>
  content && <b>{contnet}</b>

Nếu bạn gọi

class MyComponent extends Component {
  ...
  render() {
    {renderContent(content)}
    ...
  }
}

const renderContent = (content) =>
  content && <b>{contnet}</b>

let didError = false;
const stream = renderToPipeableStream(
  <App />,
  {
    onShellReady() {
      // The content above all Suspense boundaries is ready.
      // If something errored before we started streaming, we set the error code appropriately.
      res.statusCode = didError ? 500 : 200;
      res.setHeader('Content-type', 'text/html');
      stream.pipe(res);
    },
    onShellError(error) {
      // Something errored before we could complete the shell so we emit an alternative shell.
      res.statusCode = 500;
      res.send(
        '<!doctype html><p>Loading...</p><script src="clientrender.js"></script>'
      );
    },
    onAllReady() {
      // If you don't want streaming, use this instead of onShellReady.
      // This will fire after the entire page content is ready.
      // You can use this for crawlers or static generation.

      // res.statusCode = didError ? 500 : 200;
      // res.setHeader('Content-type', 'text/html');
      // stream.pipe(res);
    },
    onError(err) {
      didError = true;
      console.error(err);
    },
  }
);

Ghi chú

Note:

API này có hỗ trợ hồi hộp hạn chế và không hỗ trợ phát trực tuyến.

class MyComponent extends Component { ... render() { {renderContent(content)} ... } } const renderContent = (content) => content && <b>{contnet}</b> 2

ReactDOMServer.renderToReadableStream(element, options);

Trên máy chủ, nên sử dụng

<div dangerouslySetInnerHTML={{__html: '<strong>strong text</strong>'}} />

<div dangerouslySetInnerHTML={{__html: '<strong>strong text</strong>'}} />

Nếu bạn gọi

class MyComponent extends Component {
  ...
  render() {
    {renderContent(content)}
    ...
  }
}

const renderContent = (content) =>
  content && <b>{contnet}</b>

let controller = new AbortController();
let didError = false;
try {
  let stream = await renderToReadableStream(
    <html>
      <body>Success</body>
    </html>,
    {
      signal: controller.signal,
      onError(error) {
        didError = true;
        console.error(error);
      }
    }
  );
  
  // This is to wait for all Suspense boundaries to be ready. You can uncomment
  // this line if you want to buffer the entire HTML instead of streaming it.
  // You can use this for crawlers or static generation:

  // await stream.allReady;

  return new Response(stream, {
    status: didError ? 500 : 200,
    headers: {'Content-Type': 'text/html'},
  });
} catch (error) {
  return new Response(
    '<!doctype html><p>Loading...</p><script src="clientrender.js"></script>',
    {
      status: 500,
      headers: {'Content-Type': 'text/html'},
    }
  );
}

Ghi chú

Note:

API này có hỗ trợ hồi hộp hạn chế và không hỗ trợ phát trực tuyến.

Trên máy chủ, nên sử dụng <div dangerouslySetInnerHTML={{__html: '<strong>strong text</strong>'}} />3 (cho Node.js) hoặc <div dangerouslySetInnerHTML={{__html: '<strong>strong text</strong>'}} />0 (đối với các luồng web) thay thế.

render () => {
   //returnval = html string returned from php

   return (
     <div>
         {returnval} 
         <div>
              <span>Some data</span>
         </div>
     </div>
   );
}

Tương tự như

var parse = require('html-react-parser');parse('<div>text</div>');

<div dangerouslySetInnerHTML={{__html: '<strong>strong text</strong>'}} />

Nếu bạn gọi

class MyComponent extends Component {
  ...
  render() {
    {renderContent(content)}
    ...
  }
}

const renderContent = (content) =>
  content && <b>{contnet}</b>

Note:

Chỉ có máy chủ. API này không có sẵn trong trình duyệt.

Luồng được trả về từ phương thức này sẽ trả về một luồng byte được mã hóa trong UTF-8. Nếu bạn cần một luồng trong một mã hóa khác, hãy xem một dự án như ICONV-Lite, cung cấp các luồng biến đổi để mã hóa văn bản.

class MyComponent extends Component { ... render() { {renderContent(content)} ... } } const renderContent = (content) => content && <b>{contnet}</b> 1

render () => {
   //returnval = html string returned from php

   return (
     <div>
         {returnval} 
         <div>
              <span>Some data</span>
         </div>
     </div>
   );
}

Tương tự như

<div dangerouslySetInnerHTML={{__html: '<strong>strong text</strong>'}} />

<div dangerouslySetInnerHTML={{__html: '<strong>strong text</strong>'}} />

Đầu ra HTML của luồng này chính xác bằng những gì

var parse = require('html-react-parser');parse('<div>text</div>');

Nếu bạn có kế hoạch sử dụng React trên máy khách để thực hiện tương tác đánh dấu, không sử dụng phương pháp này. Thay vào đó, hãy sử dụng

<div dangerouslySetInnerHTML={{__html: '<strong>strong text</strong>'}} />

class MyComponent extends Component {
  ...
  render() {
    {renderContent(content)}
    ...
  }
}

const renderContent = (content) =>
  content && <b>{contnet}</b>

Note:

Chỉ có máy chủ. API này không có sẵn trong trình duyệt.

Luồng được trả về từ phương thức này sẽ trả về một luồng byte được mã hóa trong UTF-8. Nếu bạn cần một luồng trong một mã hóa khác, hãy xem một dự án như ICONV-Lite, cung cấp các luồng biến đổi để mã hóa văn bản.

class MyComponent extends Component { ... render() { {renderContent(content)} ... } } const renderContent = (content) => content && <b>{contnet}</b> 3

render () => {
   //returnval = html string returned from php

   return (
     <div>
         {returnval} 
         <div>
              <span>Some data</span>
         </div>
     </div>
   );
}

Tương tự như

<div dangerouslySetInnerHTML={{__html: '<strong>strong text</strong>'}} />

<div dangerouslySetInnerHTML={{__html: '<strong>strong text</strong>'}} />

Nếu bạn gọi

class MyComponent extends Component {
  ...
  render() {
    {renderContent(content)}
    ...
  }
}

const renderContent = (content) =>
  content && <b>{contnet}</b>

Đầu ra HTML của luồng này chính xác bằng những gì

var parse = require('html-react-parser');parse('<div>text</div>');

0 sẽ trả về.

Nếu bạn có kế hoạch sử dụng React trên máy khách để thực hiện tương tác đánh dấu, không sử dụng phương pháp này. Thay vào đó, hãy sử dụng

<div dangerouslySetInnerHTML={{__html: '<strong>strong text</strong>'}} />

8 trên máy chủ và

class MyComponent extends Component {
  ...
  render() {
    {renderContent(content)}
    ...
  }
}

const renderContent = (content) =>
  content && <b>{contnet}</b>

9 trên máy khách.

Kết xuất một phần tử phản ứng với HTML ban đầu của nó. React sẽ trả về một chuỗi HTML. Bạn có thể sử dụng phương thức này để tạo HTML trên máy chủ và gửi đánh dấu xuống yêu cầu ban đầu để tải trang nhanh hơn và để cho phép các công cụ tìm kiếm thu thập dữ liệu của bạn cho mục đích SEO.

class MyComponent extends Component { ... render() { {renderContent(content)} ... } } const renderContent = (content) => content && <b>{contnet}</b> 4

render () => {
   //returnval = html string returned from php

   return (
     <div>
         {returnval} 
         <div>
              <span>Some data</span>
         </div>
     </div>
   );
}

Ghi chú

API này có hỗ trợ hồi hộp hạn chế và không hỗ trợ phát trực tuyến.

Làm thế nào HTML kết xuất từ phản hồi API trong React?

Tôi có nên sử dụng DangeroSsetInnerHtml không?

Bạn có thể sử dụng dòng nhập nào để hiển thị ứng dụng React cho chuỗi HTML?

React có tự động thoát khỏi HTML không?