Question

我有一个看起来像这样的组件：

var MyTemplatedComponent = React.createClass({

  getDefaultProps: function () {
    return {
      discountValue: '10% off',
      welcomeMessage: 'Want {{discountValue}} off your next order?'
    };
  },

  getWelcomeMessage: function () {
    return this.props.welcomeMessage.replace('{{discountValue}}', '<strong>'+this.props.discountValue+'</strong>');
  },

  render: function() {
    return (
      <p className='lead' dangerouslySetInnerHTML={{ __html: this.getWelcomeMessage() }} />
    );
  }

});

目标是允许我们的客户自定义{{discountValue}}以满足他们的偏好。然后，我们希望在渲染时粗体折扣值。

目前，我发现正确执行此操作的唯一方法是使用dangerouslySetInnerHTML，但这感觉很危险！而且有点难看。

有人能想到更好的处理方法吗？

Answer 1

在这种情况下使用dangerouslySetInnerHTML并不危险（因为welcomeMessage将由客户端编写）。但是，如果你担心客户端可能会搞砸它并将用户输入放入欢迎消息中，那么在开始输入HTML之前，只需转义欢迎消息模板。

以下转义码来自react itself：

var ESCAPE_LOOKUP = {
  '&': '&amp;',
  '>': '&gt;',
  '<': '&lt;',
  '"': '&quot;',
  '\'': '&#x27;'
};

var ESCAPE_REGEX = /[&><"']/g;

function escaper(match) {
  return ESCAPE_LOOKUP[match];
}

function escapeTextForBrowser(text) {
  return ('' + text).replace(ESCAPE_REGEX, escaper);
}

一旦有了这个功能，就可以修复getWelcomeMessage函数，如下所示：

  getWelcomeMessage: function () {
    return escapeTextForBrowser(this.props.welcomeMessage).replace('{{discountValue}}', '<strong>'+this.props.discountValue+'</strong>');
  },

创建可自定义的“模板”，以便在ReactJS组件中使用

1 个答案: