Компоненты React переопределяют внутри рендера
Я новичок в реакции.
Я пытаюсь вывести два компонента с response 16+, которые начинаются следующим образом:
function InsuranceInfo(props) {...
// and
function InsuranceCustomerInfo(props) {...
и функция рендеринга основного компонента выглядят так
render()
{
return (
<InsuranceInfo args = {this.state.orderIfo}/>,
<InsuranceCustomerInfo args = {this.state.orderIfo}>
)
}
когда я загружаю страницу, я вижу только последнюю.
кто-нибудь может помочь, пожалуйста? благодарю вас!
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 3
Правильный способ добиться того, чего вы хотите, - использовать HOC (компоненты высшего порядка)
Посмотрите документацию здесь для более подробной информации.
HOC, вероятно, более сложны, чем то, что здесь нужно OP.
Попробуйте это, используя фрагмент
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}>
];
}
благодарю вас! это работа только с примером массива без ключевого атрибута
Не используйте знак запятой (,) между компонентами. Либо оберните возвращаемый компонент в какой-нибудь элемент 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>
)
}
Примечание для OP: ключ в том, что render() должен возвращать один компонент. Вы возвращаете несколько компонентов, упаковывая их в какой-то контейнер, например <div>, как показано в этом ответе.
Оберните свои компоненты в div, компоненты React должны возвращать только один компонент или один их массив. Кроме того, не подделывайте закрывающую косую черту во втором компоненте.