Проблема, с которой я сталкиваюсь в настоящее время, заключается в том, что вызывается дочерний компонент, вызывается даже метод рендеринга с новыми деталями (как я обнаружил в console.log), но компонент не перерисовывается.Есть 2 проблемы -
- Модал не срабатывает при первом клике.
Та же информация прилипает к модалу, независимо от того, сколько разных опций яВыбрать.Рендер, который вызывает модальное всплывающее окно, выглядит следующим образом.
<div className="card animated small fadeInDown">
{/* Card Overlay - Selection */}
<div className="select" onClick={this.selectAsset}>
<label>
<input
type="checkbox"
className="filled-in"
name={ asset.thumbnails != null &&
asset.thumbnails[k]
}
/>
</label>
</div>
<div className="card-overlay modal-trigger" data-target="asset-detail" id={asset.docId} dbId={asset.dbId} code={asset.code} key={asset.docId} onClick={(e) => this.getAssetDocId(e)}>
</div>
<div className="card-details">
{/* Card Image */}
<div className="card-image">
<img src={url} lazy duration="2000ms" style={{
position: 'relative',
width: '100%',
height: '200px',
backgroundColor: '#f7f7f7'
}}/>
</div>
{/* Card Content */}
<div className="card-content">
<span className="asset-name truncate">{asset.title}</span>
<div className="right">
<span className="badge img-format">
{assetFormat}
</span>
</div>
</div>
{/* Card Action */}
<div className="card-action">
<span className="views">
<img
src="../../../src/assets/images/icons/view-icn.png"
alt="Views"
/>
{asset.vcount}
</span>
<span className="downloads">
<img
src="../../../src/assets/images/icons/download-icn-sm.png"
alt="Downloads"
/>
{asset.dcount}
</span>
<div className="right">
<a className="add-wishlist" />
</div>
</div>
</div>
<div>
{showModalContainer && <ModalContainer assetDocId={assetDocId} assetDBId={assetDBId} code={code} defaultValues={this.props.defaultValues} allAssetDetails={this.props.allAssetDetails} showAssetDetails={this.state.showModalContainer}/>}
</div>
</div>
);
}
Дочерний компонент, который вызывается и который не выполняет повторную визуализацию, называется AssetDetails.Родительский компонент и модальный всплывающий блок имеют следующую функцию рендеринга
render() {
const showAssetDetails = this.props.showAssetDetails;
console.log(this.props.code);
return (
<div>
{ showAssetDetails &&
<Modal id="asset-detail" className="fullscreen"
modalOptions={{preventScrolling: true}}>
<div className="modal-content">
<div className="asset-details">
<div className="modal-close waves-effect" onClick={this.showInfo}>
<i className="material-icons">close</i>
</div>
{<AssetDetails assetDocId={this.state.assetDocId} assetDBId={this.state.assetDBId}
code={this.state.code} defaultValues={this.props.defaultValues}
ref={this.child} allAssetDetails={this.props.allAssetDetails} />}
</div>
</div>
</Modal>
}
</div>
)
}