Question

我需要在React类中呈现HTML（JSX）字符串。我不知道这是否可能。 dangerouslySetInnerHTML 对我无效，因为我在此文件中有不同的反应组件。这不是简单的HTML。

我有一个预期结果的例子： https://jsfiddle.net/86rg50re/1/

var MyComponent = React.createClass({
    propTypes: {
        owner: React.PropTypes.string
    },

    render: function() {
        return <div>Congrats {this.props.owner}! you have rendered MyComponent ({this.props.children})</div>;
    }
});

var Hello = React.createClass({
    render: function() {
        return <div>Header <MyComponent owner={"Daniel"}>Yayyyyyy!</MyComponent></div>;
    }
});

但我拥有的是：

var Hello = React.createClass({
    render: function() {
        var content = '<div>Header <MyComponent owner={"Daniel"}>Yayyyyyy!</MyComponent></div>';
        return transformStringToJSX(content);
    }

显然 transformStringToJSX 不存在。

有没有办法渲染jsx字符串？

Answer 1

你可以用babel来改造它

npm install --save babel-core

然后在你的代码中

var babel = require('babel-core');
var Component = eval(babel.transform('<div><MyComponent /></div>').code);

请注意，将字符串转换为可执行代码通常为bad idea。

Answer 2

最受好评的答案根本不起作用，跳过了各种关键步骤，并且没有解释代码应该去哪里。我不确定海报是否实际上没有运行代码或什么。无论如何，要真正让它工作，你需要做这样的事情：

npm install @babel/core

npm install @babel/preset-react

您需要使用 babel 将 JSX 转换为可以在服务器端运行客户端的有效 javascript。 next.js

中的服务器端代码

export async function getServerSideProps() {
    const stringToRender = require('@babel/core').transform('<h1><Component/></h1>', {presets: ['@babel/preset-react']});
    return {
        props: {
            stringToRender
        }
    }
}

现在我们需要评估客户端上的字符串：

import React from 'react';
import Component from '../component'; // Import your component

export default function Page({stringToRender}) {
    const [content, setContent] = useState(null);
    
    useEffect(()=>{
        // It is necessary to evaluate within useEffect and window so that React are available.
        window.Component = Component; // This makes Component defined in the `eval` call.
        setContent(eval(stringToRender))
    }, [])
    
    return (
        <div>
            {content}
        </div>
    )
}

export async function getServerSideProps() {
    const stringToRender = require('@babel/core').transform('<h1><Component/></h1>', {presets: ['@babel/preset-react']});
    return {
        props: {
            stringToRender
        }
    }
}

这段代码实际上会运行到预期的效果。如果您有任何其他组件要呈现，则需要在 window 对象上单独设置它们，以便在调用 eval() 时定义这些组件。

如何在React

2 个答案: