Question

我是新来的人。

我尝试输出两个带有React 16+的组件，像这样开始：

function InsuranceInfo(props) {...

// and

function InsuranceCustomerInfo(props) {...

和主要组件渲染功能如下

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

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

请问有人可以帮忙吗？谢谢！

Answer 1

在组件之间不要使用逗号（,）。要么将返回的组件包装在一些html元素中

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

或使用React Fragments

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

Answer 2

尝试使用Fragment

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

或数组

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

Answer 3

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

有关更多详细信息，请参见文档here。

React组件在渲染中覆盖

3 个答案: