JSX中参数输出HTML

JSX传递参数时，如何将参数输出为html而非字符串。

1. 前言

JSX特殊的非 DOM 属性

dangerouslySetInnerHTML：提供插入纯 HTML 字符串的功能，主要为了能和生成 DOM 字符串的库整合。

2. 实践示例

（1）需求说明

如上图，需要创建一个component，满足不同情况下文字可能换行或者有链接地址等。

（2）初始代码

//- 引用
import FormCheckbox from '../../components/form-checkbox/component';

<FormCheckbox text="我确认以上信息真实无误" />
<FormCheckbox text="我已阅读并接受</br><a href=''>隐私保护政策的条款"</a> />

//- component FormCheckbox
import React from 'react';
import './style.scss';
import selectedImage from './assets/selected_checkbox.png';

const FormCheckbox = props => (
  <div className="form-checkbox" id={props.id}>
    <span className="checkbox">
      <img className="checkbox-img" alt="" src={selectedImage} />
    </span>
    <p className="checkbox-text">{props.text}</p>
  </div>
);

export default FormCheckbox;

（3）问题及解决

以上代码，text中的内容直接当成了字符串输入，而非html。为了解决以上问题，需要用到前言中提到的dangerouslySetInnerHTML，如下。

//- 引用
import React from 'react';
import './style.scss';
import selectedImage from './assets/selected_checkbox.png';

//新增createMarkup函数
const createMarkup = text => ({ __html: text });

const FormCheckbox = props => (
  <div className="form-checkbox" id={props.id}>
    <span className="checkbox">
      <img className="checkbox-img" alt="" src={selectedImage} />
    </span>

    <!--修改p标签写法，增加dangerouslySetInnerHTML，调用createMarkup方法-->
    <p className="checkbox-text" dangerouslySetInnerHTML={createMarkup(props.text)} />
  </div>
);

export default FormCheckbox;

3. 警示

不合时宜的使用 innerHTML 可能会导致 cross-site scripting (XSS) 攻击。

4. 自定义 HTML 属性

如果往原生 HTML 元素里传入 HTML 规范里不存在的属性，React 不会显示它们。如果需要使用自定义属性，要加 data-前缀。