在 public/index.html 中有以下代码
<body>
<some-tag><some-tag>
<script type="text/javascript">
var obj1 = document.getElementsByTagName('some-tag')[0];;
obj1.innerHTML = 'abc';
</script>
</body>
如果我单独运行index.html，这会成功将 abc 渲染为 some-tag
但是如果我使用 React，即
公共(public)/index.html
<body>
<div id="root"></div>
<script type="text/javascript">
var obj1 = document.getElementsByTagName('some-tag')[0];;
obj1.innerHTML = 'abc';
</script>
</body>
和 React 组件
class Abc extends Component {
render() {
return (<some-tag />)
}
}
和index.js
ReactDOM.render(
<Abc />
document.getElementById('root')
);
它无法操作标签并显示“abc”。有什么问题吗？
最佳答案
问题多种多样。
首先当
var obj1 = document.getElementsByTagName('some-tag')[0];;执行时不能保证 DOM 实际加载并且 React 实际渲染了组件的 html。
第二个问题是修改react生成的html是可能的，但这是一种反模式。
如果你想修改渲染的行为，你必须对 React 的组件进行操作，如果参数来自服务器/后端，那么你正在寻找的是服务器端渲染 (SSR)。
关于reactjs - 替换react中的自定义html标签，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/52403349/