У меня есть эти два компонента React:
class Record extends React.Component {
render() {
...
return (
<div className="animated slideInUpTiny animation-duration-3">
{
showMessage && currentRecord &&
<Alert />
}
<div className="row">
<CardBox styleName="col-lg-12">
<AttrActions module={this.props.module} app={this.props.app} set={currentCatalog} record={currentRecord} accessCase="controls"/>
<AttrForm
fields_meta={alertedFieldsMeta}
currentForm={this.getCurrentForm()}
originalForm={this.state.originalForm}
reportChange={this.catchChange}
fetchList={fetchList}
hierarchy={this.state.hierarchy}
catalogsList={catalogsList}
fetchRecord={fetchRecord}
searchInCatalog={searchInCatalog}
/>
</CardBox>
</div>
<div className="crud-footer">
<ControlButtons />
</div>
</div>
);
}
}
class AttrActions extends React.Component {
render() {
console.log(this.props);
switch (this.props.module) {
case 'Inventory': {
return (
<InventoryActions {...this.props} />
);
}
default: {
return null;
}
}
}
}
Проблема в том, что компонент AttrActions
никогда не отображается, если я не добавлю инструкцию console.log()
в компонент Record
, например:
return (
<div className="animated slideInUpTiny animation-duration-3">
{
showMessage && currentRecord &&
<Alert />
}
<div className="row">
<CardBox styleName="col-lg-12">
{console.log('here')}
<AttrActions module={this.props.module} app={this.props.app} set={currentCatalog} record={currentRecord} accessCase="controls"/>
<AttrForm
fields_meta={alertedFieldsMeta}
currentForm={this.getCurrentForm()}
originalForm={this.state.originalForm}
reportChange={this.catchChange}
fetchList={fetchList}
hierarchy={this.state.hierarchy}
catalogsList={catalogsList}
fetchRecord={fetchRecord}
searchInCatalog={searchInCatalog}
/>
</CardBox>
</div>
<div className="crud-footer">
<ControlButtons />
</div>
</div>
);
Только в этом случае я получаю console.log(this.props)
в консоли. Если я не добавлю эту инструкцию, компонент AttrActions
никогда не будет обработан.
РЕДАКТИРОВАТЬ
Я обнаружил, что когда я помещаю каждый компонент в разные CardBox
, проблема исчезает, но я бы хотел, чтобы они оба содержались вместе:
return (
<div className="animated slideInUpTiny animation-duration-3">
{
showMessage && currentRecord &&
<Alert />
}
<div className="row">
<CardBox styleName="col-lg-12">
<AttrActions module={this.props.module} app={this.props.app} set={currentCatalog.name} record={currentRecord} accessCase="controls"/>
</CardBox>
<CardBox styleName="col-lg-12">
<AttrForm
fields_meta={alertedFieldsMeta}
currentForm={this.getCurrentForm()}
originalForm={this.state.originalForm}
reportChange={this.catchChange}
fetchList={fetchList}
hierarchy={this.state.hierarchy}
catalogsList={catalogsList}
fetchRecord={fetchRecord}
searchInCatalog={searchInCatalog}
/>
</CardBox>
</div>
<div className="crud-footer">
<ControlButtons />
</div>
</div>
);