公众号

关于React中动态render String的React元素

- - 阅 176

由于产品需要,React的Form元素是动态生成的,虽然阿里的antd给了动态生成Form的demo https://ant.design/components/form-cn/#components-form-demo-dynamic-form-item ,事实上,我也按照这个Demo把动态生成Form 表单的特色加入到了自己的产品里。

对于简单的动态表单生成,这个feature也足够了,但是对于稍微复杂的表单布局,如下图所示:

 

表单的字段1)要分组 2)一行排2个字段以上,用阿里的antd就比较困难。而且这些字手段是从配置信息动态读取出来的。

这些字手段是从配置信息动态读取出来是个字符串,如何把这些字符串在React动态呈现出来?

http://w3cgeek.com/inject-jsx-formatted-string-into-react-component.html 这里讲了两种String 转换为JSX的方法。简单的String/Html转JSX还可以,但是带第三方自定义函数的,又无法转了。

我最后放弃了String转React的JSX Component的想法,直接在服务器端生成String类型的HTML,直接用React的dangerouslySetInnerHTML 奇门绝技,在服务器端动态生成HTML的动态表单,用React的dangerouslySetInnerHTML 呈现。

 

0

本文转载 " "

原文地址 " "

相关文章!