我有一个棘手的问题:我正在React中构建一个代码编辑器，为ES6代码的不同部分设置样式。我的应用程序的工作方式是，将所有代码转换为一个字符串，然后使用Regex来识别在哪里插入<span>,<strong>和<br/>标签。然后，我采用了长字符串并使用split()的正则表达式来提取我使用到数组中的所有标记。现在剩下的是这个字符串数组:
['', '<strong>', 'for', '</strong>', ' (', '<strong>', 'let', '</strong>', ' ', '<span style={{color:"blue"}}>', 'i', '</span>', ' = ', '<span style={{color:"red"}}>', '1', '</span>', '; ', '<span style={{color:"blue"}}>', 'i', '</span>', ' <= ', '<span style={{color:"red"}}>', '10', '</span>', '; ', '<span style={{color:"blue"}}>', 'i', '</span>', '++) {', '<br/>', ', console.log(', '<span style={{color:"green !important"}}>', '`Pass number ${', '<span style={{color:"blue"}}>', 'i', '</span>', '}`', '</span>', ');', '<br/>', ',}', '<br/>', '']
我基本上需要找到一种方法将适用的字符串转换为纯JSX，并以字符串和JSX的数组结束。元素来渲染我的组件。我要去洗个澡，然后想，我假设某种地图会起作用??
感谢你的时间和帮助。
我最终退回了一步，没有将所有内容转换为Array，并使用
return <div dangerouslySetInnerHTML={{ __html: styledNumbers }}></div>
在这个项目中非常有用。如果是公开的，我可能会使用这个