React - 如何以 JSON 返回 HTML 元素

Question

我有一个 JSON 文件，其中包含字符串中的 HTML 元素 - 是否可以将 React/JSX 中的数据作为有效渲染的 HTML 返回？

var Hello = React.createClass({
  render: function() {
    var exampleJSONData = {
        "item": "Hello",
        "text": "<p>Lorem ipsum</p><p>dolor sit amet</p>"
    }
    return <div>{data.item} {data.text}</div>;
  }
});

返回：

Hello <p>Lorem ipsum</p><p>dolor sit amet</p>

而不是：

Hello
Lorem ipsum
dolor sit amet

小提琴

Answer 1

你可以尝试这样使用

dangerouslySetInnerHTML

<div dangerouslySetInnerHTML={ {__html: data.text} } />

Example

Answer 2

从 'react' 导入 React, { useState }; 从'reactflow'导入{句柄，位置}；

const CustomNode = ({ data, isConnectable }) => { const [formData, setFormData] = useState(data.curComp.mappingConfig);

const handleChange = (e) => {
    const { name, value } = e.target;
    setFormData((prevData) => ({
        ...prevData,
        [name]: value,
    }));
};

const handleSubmit = (e) => {
    e.preventDefault();
    document.getElementById('jsonOutput').innerText = JSON.stringify(formData, null, 2);
};

const renderFormFields = (obj) => {
    return Object.keys(obj).map((key) => {
        if (typeof obj[key] === 'object') {
            return (
                <div key={key}>
                    <label>{key}:</label>
                    <div style={{ marginLeft: '20px' }}>
                        {renderFormFields(obj[key])}
                    </div>
                </div>
            );
        }
        return (
            <div key={key}>
                <label htmlFor={key}>{key}:</label>
                <input
                    type="text"
                    id={key}
                    name={key}
                    value={obj[key]}
                    onChange={handleChange}
                />
                <br /><br />
            </div>
        );
    });
};

return (
    <div className="text-updater-node">
        <Handle type="target" position={Position.Top} isConnectable={isConnectable} />
        <form id="dataForm" onSubmit={handleSubmit}>
            {renderFormFields(formData)}
            <button type="submit">Submit</button>
        </form>
        <div id="jsonOutput" style={{ whiteSpace: 'pre-wrap', marginTop: '10px', padding: '10px', border: '1px solid #ddd', borderRadius: '5px' }}></div>
        <Handle type="source" position={Position.Bottom} id="b" isConnectable={isConnectable} />
    </div>
);

};

导出默认的CustomNode；