Question

我当前面临的问题是调用了子组件，甚至使用新的详细信息调用了渲染器（正如我在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>
        )
      }

使用模式调用时未触发的React ComponentWillRecieveProps

0 个答案: