创建可定制的 "templates"，用于 ReactJS 组件，无需

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>');
  },

创建可定制的 "templates"，用于 ReactJS 组件，无需

Creating customisable "templates", for use within ReactJS components, without

javascript

reactjs