Снова преобразовать строковый компонент React в jsx
У меня есть один вопрос, потому что я прочитал файл 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
?
Ответы
Попробуйте эту библиотеку https://www.npmjs.com/package/react-html-parser
.
Утилита для преобразования строк HTML в компоненты React. Избегает использования опасногоSetInnerHTML и преобразует стандартные элементы HTML, атрибуты и встроенные стили в их эквиваленты в React.
Вы можете использовать обычный старый 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>
Итак, решение моей проблемы очень популярно и просто (на ранней стадии проекта), чтобы понять проблему и исправить ее, нам нужно вернуться к серверной части приложения. Для React
приложений, если мы хотим визуализировать файл jsx с сервера, мы должны использовать рендеринг на стороне сервера, и вышеуказанная проблема исчезнет. Возможно, я покажу шаг за шагом, как включить рендеринг компонента React на сервере.
Настройте бэкэнд для включения функций 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/
Отправить компонент 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/>)) })
Визуализировать вид в клиенте
...//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 из бэкэнда, если это невозможно. Это не руководство для сложного рендеринга на стороне сервера в приложении, что является более сложной задачей, но это не сложно.