有条件地React.js renderDOM

时间:2016-05-16 12:45:21

标签: javascript reactjs

我是React的新手。我在使用reactDom进行渲染时遇到了一些问题:

index.js

import ReactDOM from 'react-dom';
import A from 'components/A';
import B from 'components/B';

render(<A />, document.getElementById('A'));
render(<B />, document.getElementById('B'));

我想展示类似

的内容
  • 渲染A到第A页
  • 将B渲染到B页 问题是当我在index.js上一起定义A和B时,所以在第A页(此处没有elementId B),它将显示如下的错误,因为React在第A页上没有elementId B

    无效的违规注册组件目标容器不是DOM元素

React and Browserify Register Component Error之类的路径检查也可以修复它,或者在调用elementid之前检查render(是否存在)。

我想知道这是否是解决此类案件的正确方法,还是有其他办法?

1 个答案:

答案 0 :(得分:0)

尝试这样的事情:

if (document.getElementById('A')) {
    render(<A />, document.getElementById('A'));
}

if (document.getElementById('B')) {
    render(<B />, document.getElementById('B'));
}

这是解决您问题的最简单,最简单的方法(它不是最干净,也不是最好的解决方案,但在学习React以及它如何与DOM一起工作时最容易理解)。如果找不到<A />容器,则不会呈现A,如果找不到<B />容器,则不会呈现B