reactjs 将字符串呈现为React组件

ffvjumwh 于 2022-12-18 发布在 React

关注(0)|答案(6)|浏览(307)

我想用一个字符串作为输入来呈现react组件，这个字符串是我从另一个页面动态接收的，但是我会有react组件的引用。

Page1:
-----------------------------
loadPage('<div><Header value=signin></Header></div>');

Page2:
--------------------------------
var React =require('react');
var Header = require('./header');

var home = React.createClass({

loadPage:function(str){ 

           this.setState({
             content : str 
           });

  },

 render : function(){

  return {this.state.content}
 }

});

在这个例子中，我以字符串的形式接收Header组件，并且我在接收页面中有Header组件的引用。我如何用实际的react组件替换字符串

reactjs

来源：https://stackoverflow.com/questions/36471869/rendering-a-string-as-react-component

6条答案

按热度按时间

slhcrj9b1#

这个react-jsx-parser组件看起来可以解决您的问题

赞(0）回复(0）举报 2022-12-18

tzxcd3kk2#

若要使用字符串渲染React组件，可以使用。

var MyComponent = Components[type + "Component"];
return <MyComponent />;

有关更多信息，请查看此处的响应：React / JSX Dynamic Component Name

赞(0）回复(0）举报 2022-12-18

ztigrdn83#

如果您可以接受将所有组件放在一个模块中，那么这样做效果会很好：

import * as widgets from 'widgets';
   var Type = widgets[this.props.componentId];
   ...
   <Type />

通配符导入的工作方式类似于剪切率组件注册表。

赞(0）回复(0）举报 2022-12-18

mfpqipee4#

内置方式

不使用任何包，您可以使用内置的react属性dangerouslySetInnerHTML来传递字符串，它将render它作为HTML

function Component() {

    const stringElement = "<h1> My Title </h1>";

    return (
        <div dangerouslySetInnerHTML={{ __html: stringElement }}>
        </div>
    );
}

它会工作得很好。

但是尽量避免渲染文本，因为这可能会使您遭受XSS攻击，除非别无选择，否则您应该XSS清除文本或避免渲染文本

赞(0）回复(0）举报 2022-12-18

hujrc8aj5#

使用组件的另一种方法

const a = {
    b: {
        icon: <component props />
    }
}

在渲染函数中

return(
          {a.b.icon}
       )

这将在JSON对象中呈现组件

赞(0）回复(0）举报 2022-12-18

qyswt5oh6#

此string-to-react-component库可以帮助您实现所需的功能

赞(0）回复(0）举报 2022-12-18

我来回答

reactjs 将字符串呈现为React组件

6条答案

内置方式

相关问题

热门标签

最新问答