将字符串渲染为 React 组件

IT技术 reactjs
2021-05-02 03:57:21

我想用一个字符串作为我从另一个页面动态接收的输入来呈现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组件替换字符串

4个回答

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

要使用您可以使用的字符串呈现react组件。

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

有关更多信息，请查看此处的响应： React / JSX 动态组件名称

如果您可以将所有组件都放在一个module中，那么这很有效：

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

通配符导入的工作方式类似于降价组件注册表。

另一种使用组件的方法

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

在渲染函数中

 return(
          {a.b.icon}
       )

这将在您的 JSON 对象中呈现您的组件

其它你可能感兴趣的问题
上一篇在 MUI 主题中动态更改主色 下一篇Webpack 无法加载字体 (ttf)