Снова преобразовать строковый компонент React в jsx

Aug 17 2020

У меня есть один вопрос, потому что я прочитал файл javascript из NodeJS и отправил клиенту, и здесь я показываю весь файл как строку (что очевидно), и вот мой вопрос. Есть ли какое-либо решение для повторного преобразования строкового компонента в jsx? Это не только теги html, поэтому dangerouslySetInnerHTMLили аналогичные методы не работают.

Мои строковые компоненты выглядят как типичный компонент React, примерно так:

import React from 'react';
import { Row } from 'react-bootstrap;
import Home from './Home'
     ......
const Index = () => {
   const renderHelloWorld = <h1>Hello World</h1>

   return (
      <div>{renderHelloWorld}</div>
   )
}

export default Index;

Итак, это строка, с которой я борюсь, как преобразовать ее в jsx (возможно, это невозможно), и я должен использовать рендеринг на стороне сервера с помощью React methodfs, например ReactDOMServer?

Ответы

brijesh-pant Aug 17 2020 at 13:52

Попробуйте эту библиотеку https://www.npmjs.com/package/react-html-parser.

Утилита для преобразования строк HTML в компоненты React. Избегает использования опасногоSetInnerHTML и преобразует стандартные элементы HTML, атрибуты и встроенные стили в их эквиваленты в React.

AravindaMeewalaarachchi Aug 17 2020 at 13:54

Вы можете использовать обычный старый JavaScript, чтобы добиться цели.

document.querySelector('#elementToBeReplace').innerHTML = renderHelloWorld;

Другой вариант с react.js - использование dangerouslySetInnerHTML.

<div dangerouslySetInnerHTML={{ __html: renderHelloWorld }} />

Или вы можете использовать html-react-parser.

import Parser from 'html-react-parser';

const renderHelloWorld = <h1>Hello World</h1>

<div>{Parser(renderHelloWorld)}</div>
Mat.Now Aug 18 2020 at 14:12

Итак, решение моей проблемы очень популярно и просто (на ранней стадии проекта), чтобы понять проблему и исправить ее, нам нужно вернуться к серверной части приложения. Для Reactприложений, если мы хотим визуализировать файл jsx с сервера, мы должны использовать рендеринг на стороне сервера, и вышеуказанная проблема исчезнет. Возможно, я покажу шаг за шагом, как включить рендеринг компонента React на сервере.

  1. Настройте бэкэнд для включения функций ES6

    Установить пакеты babel

    npm install @babel/core @babel/node @babel/preset-env @babel/preset-react --save-dev
    

    Есть много способов настроить Babel, я использую package.jsonдля этого ближайший .

    {
      ......,
      /*This have to be in the top level in package.json*/
    
      "babel":{
        "presets":[
          "@babel/preset-env",
          "@babel/preset-react" 
        ]
      }
    }
    

Дополнительная информация о пакетах и ​​конфигурациях babel: https://babeljs.io/docs/en/

  1. Отправить компонент React клиенту

    Для этого нам нужно установить пакеты response и response-dom на стороне сервера.

    npm install react react-dom
    

    Например, на вашем сервере файл js или route.js:

     ....  //necesarry imported modules
     import ReactDOMServer from 'react-dom/server'
     import Index from './Index';
    
    router.get('/exampleRoute', (req, res) => {
    
       .... //your route business logic
    
       res.send(ReactDOMServer.renderToString(<Index/>))
    })
    
  2. Визуализировать вид в клиенте

    ...//correct React component
    const[state, setState] = useState({Component: ''});
    
    fetch('/exampleRoute')
     .then(response => response.json())
      .then(data => setState(state => ({...state, Component: data.data));
    
    ....
    
    return(
      <div dangerouslySetInnerHTML={{ __html: state.Component }}></div>
    )
    

Это всего лишь простой пример того, как вы можете визуализировать компонент React из бэкэнда, если это невозможно. Это не руководство для сложного рендеринга на стороне сервера в приложении, что является более сложной задачей, но это не сложно.