Question

道歉，如果这是一个简单的问题，我对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标记输出一些粗体文字，但显然它不起作用。

非常感谢任何帮助。

Answer 1

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

{{1}}

Answer 2

你可以在返回之前使用类似的东西：

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

然后在返回时使用此copyText。

React / Javascript - 在字符串中输出HTML标记

2 个答案: