reactjs - 子组件未在 React js 中渲染

Question

我遇到的情况是，我无法从父组件渲染我的子组件 ModalConatiner。不过，我想提一下，在这一部分之前和之后有一系列父子组件。我也导入了它。

 getAssetDocId(e) {
        var assetDocId = e.currentTarget.attributes['id'].value;
        var assetDBId = e.currentTarget.attributes['dbId'].value;
        var code = e.currentTarget.attributes['code'].value;

        console.log('----------------------------------------------------');
        return <ModalContainer assetDocId={assetDocId} assetDBId={assetDBId} code={code} defaultValues={this.props.defaultValues} allAssetDetails={this.props.allAssetDetails} />
     }

调用者

<div className="card-overlay modal-trigger"  data-target="asset-detail" id={asset.docId} dbId={asset.dbId} code={asset.code} key={asset.docId} onClick={this.getAssetDocId}>

子组件 -

import React, { Component } from 'react';
import {Button, Icon, Row, Col, Carousel, Chip, Collapsible, CollapsibleItem, Input, Dropdown, NavItem, Form, Modal} from 'react-materialize';
import AssetDetails from './../assetlisting/assetdetails.jsx';

class ModalContainer extends Component {
    constructor(props) {
        super(props);
        this.resetValues = this.resetValues.bind(this);
        this.resetAssetValues = React.createRef();
        this.renderAssetDetails = this.renderAssetDetails.bind(this);
    }

    renderAssetDetails() {

        return <AssetDetails assetDocId={this.props.assetDocId} assetDBId={this.props.assetDBId} code={this.props.code} defaultValues = {this.props.defaultValues} ref={this.resetAssetValues} allAssetDetails={this.props.allAssetDetails}/>;
    }

    resetValues = () => {
        this.resetAssetValues.current.showInfo();
    };

    render() {
        console.log('ppppppppppppppppppppppppppppppp');

        return (
            <div>
                <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.resetValues}>
                                <i className="material-icons">close</i>
                            </div>
                            { this.renderAssetDetails() }
                        </div>
                    </div>
                </Modal>
            </div>
        )
    }
}
export default ModalContainer;

有人可以指出这里有什么问题吗？

Answer 1

你需要做的是渲染子组件

检查下面的代码以便更好地理解。这是实现您的功能的方式

constructor(props){
   super(props);
   this.state = {
      assetDocId: "",
      assetDBId: "",
      code: "",
      showModalContainer: false
   }
}

getAssetDocId = e => {
     this.setState({
        assetDocId:e.currentTarget.attributes['id'].value,
        assetDBId: e.currentTarget.attributes['dbId'].value,
        code: e.currentTarget.attributes['code'].value,
        showModalContainer: true
     })
}

render(){
    const {assetDocId, assetDBId, code, showModalContainer} = this.state;
    return(
      <div>
        {showModalContainer && <ModalContainer assetDocId={assetDocId} assetDBId={assetDBId} code={code} defaultValues={this.props.defaultValues} allAssetDetails={this.props.allAssetDetails} />}
      </div>
    )
}

有很多方法可以做到同样的事情。