React / Javascript - 以字符串形式输出 HTML 标记答案

【问题标题】：React / Javascript - Output HTML tag in stringReact / Javascript - 以字符串形式输出 HTML 标记
【发布时间】：2018-09-22 11:40:45
【问题描述】：

抱歉，如果这是一个简单的问题，我对 vanilla JS 和 React 还很陌生。

是否可以在 React / JS 字符串中输出简单的 HTML 标签（即<strong>）？

这是我目前正在使用的；

renderArtistFeatures() {
    const createFeatures = [
        {
            feature: 'free',
            Icon: FreeIcon,
            title: 'Main title',
            copy: 'Some sample text with a <strong>HTML tag</strong>'
        }
    ].map(({ feature, Icon, title, copy }, i) => {
        const klass = `create-feature create-feature--${feature} column small-24 medium-8`;

        return (
            <div key={i} className={klass}>
                <div className="create-feature__inner">
                    <div className="create-feature__icon create-feature__icon--free">
                        <Icon />
                    </div>
                    <div className="create-feature__content">
                        <h2 className="create-feature__title">{title}</h2>
                        <p>{copy}</p>
                    </div>
                </div>
            </div>
        );
    });
    return (
       // My other code is output here
    );
}

如您所见，我正在尝试使用 HTML 标记输出一些粗体文本，但显然它不起作用。

任何帮助将不胜感激。

【问题讨论】：

标签： javascript reactjs jsx

【解决方案1】：

JSX 在使用 babel.js 在浏览器中运行之前被编译为 javascript。如果您从http://babeljs.io 获得生成的代码：显然“复制只是一个字符串”

 'use strict';

function renderArtistFeatures() {
    var createFeatures = [{
        feature: 'free',
        Icon: FreeIcon,
        title: 'Main title',
        copy: 'Some sample text with a <strong>HTML tag</strong>'
    }].map(function (_ref, i) {
        var feature = _ref.feature,
            Icon = _ref.Icon,
            title = _ref.title,
            copy = _ref.copy;

        var klass = 'create-feature create-feature--' + feature + ' column small-24 medium-8';

        return React.createElement(
            'div',
            { key: i, className: klass },
            React.createElement(
                'div',
                { className: 'create-feature__inner' },
                React.createElement(
                    'div',
                    { className: 'create-feature__icon create-feature__icon--free' },
                    React.createElement(Icon, null)
                ),
                React.createElement(
                    'div',
                    { className: 'create-feature__content' },
                    React.createElement(
                        'h2',
                        { className: 'create-feature__title' },
                        title
                    ),
                    React.createElement(
                        'p',
                        null,
                        copy
                    )
                )
            )
        );
    });
}

renderArtistFeatures();

【讨论】：

【解决方案2】：

你可以在返回之前使用这样的东西：

const copyText = document.createElement("span");
copy.innerHTML = copy;

然后在 return 中使用这个copyText。

【讨论】：