Javascript 反应组件覆盖渲染内部

我是新来的

我尝试用react 16+输出两个组件，如下所示：

function InsuranceInfo(props) {...

// and

function InsuranceCustomerInfo(props) {...

主要组件渲染函数如下所示

render()
{
      return (
            <InsuranceInfo args={this.state.orderIfo}/>, 
            <InsuranceCustomerInfo args={this.state.orderIfo}>
      )
}

render（）
{
返回(
, 
)
}

当我加载页面时，我只看到最后一个页面

---

有人能帮忙吗？谢谢大家!

实现目标的正确方法是使用HOC（高阶组件）

---

有关更多详细信息，请参阅文档

实现目标的正确方法是使用HOC（高阶组件）

---

有关更多详细信息，请参阅文档

试试这个，它使用片段

render()
{
  return (
     <>
        <InsuranceInfo args={this.state.orderIfo}/>
        <InsuranceCustomerInfo args={this.state.orderIfo}>
     </>
  )
}

render（）
{
返回(
)
}

或数组

render()
{
  return [
      <InsuranceInfo key="info" args={this.state.orderIfo}/>, 
      <InsuranceCustomerInfo key="customer" args={this.state.orderIfo}>
  ];
}

render（）
{
返回[
, 
];
}

试试这个，它使用片段

render()
{
  return (
     <>
        <InsuranceInfo args={this.state.orderIfo}/>
        <InsuranceCustomerInfo args={this.state.orderIfo}>
     </>
  )
}

render（）
{
返回(
)
}

或数组

render()
{
  return [
      <InsuranceInfo key="info" args={this.state.orderIfo}/>, 
      <InsuranceCustomerInfo key="customer" args={this.state.orderIfo}>
  ];
}

render（）
{
返回[
, 
];
}

不要在组件之间使用逗号（

，

）符号。或者将返回的组件包装在某个html元素中

render()
{
    return (
       <div>
         <InsuranceInfo args={this.state.orderIfo}/>
         <InsuranceCustomerInfo args={this.state.orderIfo} />
       </div>
    )
}

render（）
{
返回(
)
}

或使用反应片段：

render()
{
    return (
        <React.Fragment>
           <InsuranceInfo args={this.state.orderIfo}/>
           <InsuranceCustomerInfo args={this.state.orderIfo} />
        </React.Fragment>
    )
}

render（）
{
返回(
)
}

不要在组件之间使用逗号（

，

）符号。或者将返回的组件包装在某个html元素中

render()
{
    return (
       <div>
         <InsuranceInfo args={this.state.orderIfo}/>
         <InsuranceCustomerInfo args={this.state.orderIfo} />
       </div>
    )
}

render（）
{
返回(
)
}

或使用反应片段：

render()
{
    return (
        <React.Fragment>
           <InsuranceInfo args={this.state.orderIfo}/>
           <InsuranceCustomerInfo args={this.state.orderIfo} />
        </React.Fragment>
    )
}

render（）
{
返回(
)
}

HOC可能比OP在此处需要的更复杂。HOC可能比OP在此处需要的更复杂。将组件包装在div中，React组件只应返回一个组件或一个组件数组。另外，不要在第二个组件中伪造结束斜杠。将组件包装在div中，React组件只应返回一个组件或它们的一个数组。另外，不要在第二个组件中伪造结束斜杠。注意操作：关键是

render（）

必须返回单个组件。通过将多个组件包装在某个容器中（如本答案中所示）返回多个组件。操作说明：关键是

render（）

必须返回单个组件。您可以返回多个组件，方法是将它们包装在某个容器中，如回答中所示的

。谢谢！它只适用于没有键属性的数组示例谢谢！它仅适用于没有键属性的数组示例