Question

我想使用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（）：必须返回有效的React元素（或null）。您可能已经返回了undefined，数组或其他一些无效对象。

我的渲染看起来像这样：

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);
}

P.S。其他组件是普通对象{props ...}，但这些动态组件具有相同的结构，但另外包含在对象'body'{body：{props ...}}中。所以ReactElement.isValidElement不能检查对象的$$类型属性，因为这个'body'包装器=（

从现有的html字符串中渲染组件

0 个答案: