javascript - React 组件在渲染中覆盖

Question

我是 React 新手。

我尝试使用 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>
    )
}