使用 React 构建动态表单答案

【问题标题】：Building a dynamic formwith React使用 React 构建动态表单
【发布时间】：2017-08-01 05:01:29
【问题描述】：

G'day。我正在尝试使用 react、redux、redux-for 和我自己的例程构建一个动态表单。我循环浏览表单的 JSON 描述，然后在我的解析器中构建 JSX。

当我终于回到调用组件时，它只是呈现为一个大字符串！

<Accordion uniqId={'addAsset'} {...this.props} singleOpen={true} > <AccordionSection title=Asset Summary - Mandatories noFunctions=12 noFunctionsDone=0 validated={true} required={true} openByDefault={true} > <p>RenderInput</p><p>RenderInput</p></AccordionSection> <AccordionSection title=Asset Summary - Mandatories noFunctions=12 noFunctionsDone=0 validated={true} required={true} openByDefault={true} > </AccordionSection></Accordion>

调用组件会这样做

render() { const { handleSubmit } = this.props;

返回 (

添加资产

    <div className="col-sm-12">
        <form  className="form-horizontal" onSubmit={handleSubmit(this.onSubmit.bind(this))}>
            <div className="well">
                <SmartForm form={assetForm}   />
            </div>
            <div>
                <button type="submit" id="createSave" className="btn btn-info btn-space next">Create & Save</button>
                <button type="submit" className="btn btn-info btn-space next">Save & Close</button>
                <button type="submit" className="btn btn-success btn-space next">Save & Publish</button>
                <button type="submit" className="btn btn-danger btn-space next">Close</button>
                <button type="submit" className="btn btn-space next">More</button>
            </div>
        </form>
    </div>
</div>
    );

SmartForm 会这样做

   //--------
    render() {
        return(
                <div>
                    <h2>SmartForm Parser</h2>
                    {this.parse(this.props.form)}
                </div>
        );

并且 parse 是一个帮助器，它返回一个数组（我认为是可以呈现的代码行）。

我弄错了。任何帮助表示赞赏。

【问题讨论】：

标签： reactjs ecmascript-6

【解决方案1】：

您需要使用dangerouslySetInnerHTML 在 JSX 中呈现原始 HTML。

createMarkup() {
  return {__html: 'First &middot; Second'};
}
render() {
  return <div dangerouslySetInnerHTML={createMarkup()} />;
}

重要的部分是您必须在带有__html 键的对象中返回它。

【讨论】：