Question

在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渲染成一些标签

但是，如果我使用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'。有什么问题吗？

Answer 1

问题多种多样。

首先是

  var obj1 = document.getElementsByTagName('some-tag')[0];;

执行时，不能保证DOM实际已加载，然后React不能实际渲染组件的html。

第二个问题是可以修改react生成的html，但这是一种反模式。

如果要修改渲染的行为，则必须对react的组件进行操作，如果该参数来自服务器/后端，则您要查找的是服务器端渲染（SSR）。

在React中替换自定义html标签

1 个答案: