Элементы React dom загружаются, но на самом деле не отображаются в браузере - PullRequest
Новая
       21

Элементы React dom загружаются, но на самом деле не отображаются в браузере

0 голосов
/ 10 октября 2018

У меня есть поисковый компонент, который выводит активы в соответствии с выполненным поиском. Проблема в том, что рендер вызывается с правильным набором ресурсов, и, кроме того, он отображается в элементе dom. Я не понимаю, почемуt он отображается в реальном окне браузера. 

{this.state.data.map(function (asset) {
                // Asset Card
                {
                    return (<AssetCard asset={asset} defaultValues={this.props.defaultValues}
                                       allAssetDetails={this.state.data}
                                       triggerGetAssetDocId={this.getAssetDocId} key={asset.code}/>);
                }
            }, this)}

Это своего рода родительский компонент, который вызывает дочерний компонент, который фактически отображает карточки активов на основе поиска.Дочерний компонент выглядит так: 

 <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.code}
                 onClick={(e) => this.props.triggerGetAssetDocId(e)}>
            </div>
            {/* Card Image */}
            <div className="card-image">

            </div>
            <div className="card-details">
                {/* Card Content */}
                <div className="card-content">
                    <span className="asset-name truncate">{asset.title}</span>
                    <div className="right">

                    </div>
                </div>
                {/* Card Action */}
                <div className="card-action">
                    <span className="views">
                        <span class="jdicon-eye-open jdicon"></span>
                        {asset.vcount}
                    </span>
                    <span className="downloads">
                        <span class="jdicon-download jdicon"></span>
                        {asset.dcount}
                    </span>
                    <div className="right">
                        {/* <a className="add-wishlist"/> */}
                        <span className="badge img-format" data-format={assetFormat}>
                        {assetFormat}
                        </span>
                    </div>
                </div>
            </div>
        </div>

Может кто-нибудь указать, где мой подход может быть неправильным?

1 Ответ

0 голосов
/ 10 октября 2018

Ваши данные «актива», которые вы отправляете от своего родителя к ребенку, будут переданы через свойства, поэтому их можно оценить с помощью «this.props». Предположим, что если вы хотите получить заголовок, вы можете сделать this.props.asset.заглавие.Точно так же вы можете также получить доступ к другим данным.Надеюсь, это поможет вам

...