转译（客户端）后更改 ReactJS 子组件？

Posted 2023-02-21

【中文标题】转译（客户端）后更改 ReactJS 子组件？

【英文标题】：Alter ReactJS child components after transpiling (client side)?

【发布时间】：2016-02-19 14:28:21

【问题描述】：

使用 ReactJS，您可以使用其他组件创建组件，如下所示：

<MyComponent>
  <Calendar />
  <ProfilePic />
</MyComponent>

所以在这种情况下，MyComponent 有点像一个布局容器，有两个子组件在生成的 html 中按特定顺序排列。

如果MyComponent 中的子组件的顺序需要在客户端改变怎么办？这在转译之前在服务器端很容易做到，但是一旦代码发送到浏览器，此时组件已经转译成 JS...

您是否将子组件作为属性传递并仅定义它们在属性中的<MyComponent> 布局中显示的“顺序”？例如，页面上的某些控件/小部件可能会改变子组件的顺序，以便在 HTML 中 <ProfilePic> 现在位于 <Calendar> 之前。

解决这个问题的最佳方法是什么？

【问题讨论】：

不确定我是否理解。是否要在运行时动态更改子级的顺序？

是的，在浏览器中，在客户端。对不起，我可能不清楚。不确定您是否将所有组件单独编译并以某种方式将它们作为子组件传递到 MyComponent 组件中，或者您如何去做...

【参考方案1】：

是的，您可以这样做，因为您必须进行一些代码更改，例如您必须创建一个 CustomeComponent，它可以在运行时决定在运行时应该加载哪个组件，就像您的 CustomeComponent 看起来一样

var Custome=React.createClass(

var InputComponentName=this.props.input;

render:function()

return(
  <InputComponentName />
 )

);

现在你必须从父组件调用组件像

<MyComponent>
 <Custome input="Calender" />
</MyComponent>

在上面提到的代码中，您可以执行类似序列号的逻辑，并基于它将呈现的序列。