我试图弄清楚在React中将一个组件传递给另一个组件有什么不同，其中有什么不同。下面是语法。
<div className="App"> <RegularList list={smallList} comp={SmallList}/> </div>
和
<div className="App"> <RegularList list={smallList} comp={<SmallList/>}/> </div>
fnx2tebb1#
在React中，将一个组件传递给另一个组件时，有没有关闭标签会对组件的渲染方式产生影响。当你传递一个组件而没有关闭标记作为 prop 时，这意味着你传递的是对该组件的引用。这意味着组件不会立即呈现，而是将其引用传递给父组件，并在需要时呈现。另一方面，当你传递一个带有结束标记的组件作为 prop 时，你传递的是组件的实际示例。这意味着组件将立即呈现，并且其输出将传递给父组件。因此，在您提供的示例中，当您将带有结束标记的<SmallList/>作为prop传递给RegularList组件时，它将创建SmallList组件的示例并立即呈现它。然而，当你传递SmallList而不把关闭标记作为一个prop时，它将传递一个对SmallList组件的引用，并且它将在需要时被呈现。在大多数情况下，传递不带关闭标记的组件是首选的，因为这样可以通过避免不必要的渲染来获得更好的性能。但是，在某些情况下，传递带有结束标记的组件可能是必要的，例如当您需要向组件传递props时。
<SmallList/>
RegularList
SmallList
1条答案
按热度按时间fnx2tebb1#
在React中，将一个组件传递给另一个组件时，有没有关闭标签会对组件的渲染方式产生影响。
当你传递一个组件而没有关闭标记作为 prop 时，这意味着你传递的是对该组件的引用。这意味着组件不会立即呈现，而是将其引用传递给父组件，并在需要时呈现。
另一方面，当你传递一个带有结束标记的组件作为 prop 时，你传递的是组件的实际示例。这意味着组件将立即呈现，并且其输出将传递给父组件。
因此，在您提供的示例中，当您将带有结束标记的
<SmallList/>作为prop传递给RegularList组件时，它将创建SmallList组件的示例并立即呈现它。然而，当你传递SmallList而不把关闭标记作为一个prop时，它将传递一个对SmallList组件的引用，并且它将在需要时被呈现。在大多数情况下，传递不带关闭标记的组件是首选的，因为这样可以通过避免不必要的渲染来获得更好的性能。但是，在某些情况下，传递带有结束标记的组件可能是必要的，例如当您需要向组件传递props时。