Question

我正在使用 ReactJS 并尝试在JSX标记中包装特定的单词/短语。我有一个 data.jsx ，其中我有一个包含message: "{span}Hello{/span} what's up?"等对象的数组。现在，我想将 {span} {/ span} 替换为代码。可悲的是，我不能使用.replace('{span}', <span>)来完成这项任务。有没有办法做到这一点？

如果我想在同一个字符串中多次使用{span} {/ span}，这可能会更复杂。但如果有办法，那就太好了。

Answer 1

您可以使用dangerouslySetInnerHTML *：

*谨慎使用：如果其内容来自用户输入，则会出现严重的安全漏洞。

const obj = {
  message: "{strong}Hello{/strong} what's {em}up{/em}?"
};

const content = obj.message
  .replace(/{/g, '<')
  .replace(/}/g, '>');

ReactDOM.render(
  React.createElement('span', { dangerouslySetInnerHTML: { __html: content } }),
  document.getElementById('root')
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

<div id="root">
</div>

Answer 2

将您的span数据指定为Component，然后您可以将其用作标记，如下所示，

let CustomTag = `${span}`;

然后将其用作<CustomTag>Your data here..</CustomTag>。

注意：组件名首字母应大写。

Answer 3

像以前提到的那样使用dangerouslySetInnerHTML是不安全的，我在某种程度上也不同意苏菲。

Parsing JSX at runtime is error-prone and slow, and can easily have security implications – it wouldn't inherently be any safer than dangerouslySetInnerHTML is.，作者Sophie Alpert（here）

因此，我决定将此包用于此任务-regexify-string

npm install-保存regexify-string

regexifyString({
        pattern: /\[.*?\]/gim,
        decorator: (match, index) => {
            return (
                <Link
                    to={SOME_ROUTE}
                    onClick={onClick}
                >
                    {match}
                </Link>
            );
        },
        input: 'Some initial string with [link]',
    });

用JSX标记替换字符串

3 个答案: