reactjs - 子组件未在反应 js 中呈现
问题描述
我在这里遇到一种情况,我无法从我的父母那里渲染我的子组件 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;
有人可以指出这里有什么问题吗?
解决方案
你需要做的是渲染子组件是
检查下面的代码以获得更好的理解。这是您实现功能的方式
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>
)
}
有很多方法可以做到这一点。
推荐阅读
- winforms - mingw g++ Windows子系统WinMain没有得到hInstance值
- popup - Xamarin 形式;如何从 rg.plugins 弹出页面的 xaml.cs 类访问标签?
- hibernate - 条件内的休眠瞬态场
- javascript - 博主:如何在 java-script 变量中获取帖子标签
- database - 如何从主要主机获取备用主机名
- angular - Ng cli如何生成具有所需名称的组件
- python - 过滤 DataFrame 以获取其值随时间减少的 id 数据
- ios - 根据字典数组为 tableview 设置 numberOfRowsInSection
- c# - 我可以更改 StorageFile 的扩展名吗?
- python - Flask 没有将数据 url 字符串放入模板中