当前位置: 首页 > 面试题库 >

在DOM中多次使用React.render()是否可以?

吴正祥
2023-03-14
问题内容

我想使用React在整个DOM中多次添加组件。这个小提琴显示了我要执行的操作,并且不会引发任何错误。这是代码:

HTML:

<div id="container">
    <!-- This element's contents will be replaced with the first component. -->
</div>

<div id="second-container">
    <!-- This element's contents will be replaced with the second component. -->
</div>

JS:

var Hello = React.createClass({
    render: function() {
        return <div>Hello {this.props.name}</div>;
    }
});

React.render(<Hello name="World" />, document.getElementById('container'));

React.render(<Hello name="Second World" />, document.getElementById('second-container'));

我已经看过这个问题了,恐怕通过上述操作,我将冒使React组件相互干扰的风险。该问题的答案建议使用服务器端渲染,这对我来说不是一个选择,因为我正在使用Django服务器端。

另一方面,也许我在做什么就可以了,因为我只安装了一个React库实例(而不是多个组件调用自己的React实例)?

使用多个DOM实例的这种方法是使用React的一种好方法吗?


问题答案:

是的,React.render在同一页面上多次调用是完全可以的。就像您建议的那样,React库本身仅加载一次,但是每次调用React.render都会创建一个独立于其他组件的新组件实例。(实际上,这种情况在过渡到React的站点上并不少见,其中页面的某些部分是使用生成的,React.render而其他部分不是。)



 类似资料:
  • 问题内容: 有什么方法可以检查元素在纯JS(无jQuery)中是否可见? 因此,例如,在此页面中:PerformanceBikes,如果将鼠标悬停在Deals上(在顶部菜单上),则会显示一个交易窗口,但开始时未显示。它在HTML中,但不可见。 那么,给定一个DOM元素,我如何检查它是否可见?我试过了: 但它似乎不起作用。我想知道应该检查哪些属性。我想到: 还有其他我可能会想念的东西吗? 问题答案:

  • 有没有什么方法可以让我检查一个元素在纯JS(没有jQuery)中是否可见? 例如,在这个页面:Performance Bikes中,如果你将鼠标悬停在Deals(在顶部菜单上)上,就会出现一个Deals窗口,但一开始并没有显示出来。它在HTML中,但不可见。 那么,给定一个DOM元素,我如何检查它是否可见呢?我试过: 还有其他我可能失踪的吗?

  • 问题内容: 在MySQL中,您可以像这样插入多行: 但是,尝试执行此类操作时出现错误。是否可以一次在SQLite数据库中插入多行?这样做的语法是什么? 问题答案: 更新 正如BrianCampbell在此处指出的那样,SQLite 3.7.11及更高版本现在支持原始文章的更简单语法 。但是,如果您希望在旧数据库之间实现最大兼容性,则所示的方法仍然适用。 原始答案 如果有特权,River的回答:您可

  • 问题内容: 我是新手,遇到此问题: 当我这样渲染时,它会给我错误提示 我应该为每个html标签或每一行创建一个componenet,还是可以以这种方式呈现。 有什么建议吗? 问题答案: 在React <v16.0中,该方法只能呈现单个根节点。( 更新: 这在v16中已更改,请参见下文)。就您而言,您将返回3个节点。为了解决这个问题,您可以将3个节点包装在一个根节点中: 在React v16中,可以

  • 我知道你们中的一些人会对这个问题感到畏缩,因为我知道我所问的并不是最佳实践。然而,我无论如何都会问,希望把虐待减到最低。 当条件语句为假时,ngIf从DOM中删除元素。是否有设置、标志、参数等。这将改变ngIf的行为,使元素留在DOM中并被设置为显示:none?我不是在寻找一种变通方法,比如[hidden],但是我想知道是否有可能改变*ngIf的行为。 我很快(这是关键字)更新了一个现有的jQue