react将字符串转为标签

React中将字符串转换为DOM节点

React不支持直接将字符串放到render返回值中，这样放入的字符串会被当做一般字符串处理。

1
2
3
4
5
6
7
8

const App = () => {const str = '<div>test</div>';return (<div>{str}</div>);
};

该组件中的str会被当做字符串处理，直接在页面中显示出来。

React有一个专门的属性叫dangerouslySetInnerHTML是用于处理这种情况的。

1
2
3
4
5
6
7

const App = () => {const str = '<div>test</div>';return (<div dangerouslySetInnerHTML={
      { __html:str }}></div>);
};

像上面这种处理方式就能正确完成在React组件中渲染字符串了，不过从这个属性名就可以看出，在进行这个操作之前一定要十分清楚自己传进去的字符串是可以被转换成正确的HTML的字符串。