0

我想使用 React 为已经准备好的 html 字符串和样式对象实现组件的创建。我们有如下数据：

const obj = {
    block1: '<div>TEST-1</div>',
    block2: '<div>TEST-2</div>',
};
const styling = {
    block1: { fontSize: '12px', color: '#123456' },
    block2: { fontSize: '18px', color: '#153426' },
};

因此，我希望创建 2 个块：

<div style="font-size:12px; color:#123456;">TEST-1</div>
<div style="font-size:18px; color:#153426;">TEST-2</div>

我已经尝试了 2 个 npm 模块来实现这个想法（没有样式）：

  • ReactHtmlParser - 从任何 html 字符串创建组件
  • JsxParser - 可以同时渲染 jsx + 组件

但是我总是遇到同样的错误： Component.render(): A valid React element (or null) must be returned。您可能返回了未定义、数组或其他一些无效对象。

我的渲染看起来像这样：

render() {
    customBlock = getBlock(obj, styling); // markup objects
    return(
        <Component1 />
        { customBlock }
        <Component2 />
    );
}

也许有人可以帮助理解为什么 getBlock 函数中的组件返回无法呈现的东西？

getBlock = (block, styling) => {
    let markup = '';
    for (let element in block) {
        if (block[element]) {
            markup += block[element];
        }
    }
    return <JsxParser bindings={{}} components={{}} jsx={`${markup}`} />
    // OR
    // return ReactHtmlParser(markup);
}

PS 其他组件是普通对象 {props...}，但动态组件具有相同的结构，但额外包含在对象'body' {body:{props...}} 中。所以 ReactElement.isValidElement 无法检查对象的 $$type 属性，因为这个“body”包装器 =(

4

0 回答 0