代码之家 › 专栏 › 技术社区 › Nimish goel

插入带有React变量语句的链接(JSX)

jsx reactjs html javascript

0

Nimish goel · 技术社区 · 5 年前

如果我们必须在JSX中插入带有React变量的普通html元素,这很简单,我们可以使用 dangerouslySetInnerHTML ,或者我们可以使用任何npm包 html-react-parser .

const thisIsMyCopy = '<p>copy copy copy <strong>strong copy</strong></p>';
render: function() {
    return (
        <div className="content" dangerouslySetInnerHTML={{__html: thisIsMyCopy}}></div>
    );
}

但是如果我们尝试在html中添加任何Link元素,它不会转换为锚定标记。

const thisIsMyCopy = '<Link to="/button" >button</Link>';

https://codesandbox.io/embed/react-example-y5m94?fontsize=14&hidenavigation=1&theme=dark 我希望你们中的很多人

1 回复 | 直到 5 年前

1

0

shai_sharakanski 5 年前

请尽量使其不是字符串:

const thisIsNotWorking = <Link to="/button" >button</Link>;

2

0

Monika Aggarwal 5 年前

const thisIsMyCopy = '<Link to="/button" >button</Link>';

这里的“thisIsMyCopy”不是一个常规的HTML元素,因为当您尝试向DOM中插入一个非HTML元素或一些随机的东西时,DOM不理解这一点元素检查 Document Type Definition (DTD) ,DTD指定哪些元素类型是可能的(即它定义了元素类型的集合)以及它们在文档中出现的有效组合如果你用

const thisIsMyCopy = '<a to="/button" >button</a>';

它可以工作,因为它是一个有效的HTML元素。

危险设置HTML的目的是设置一些有效的HTML。