我正在使用ReactJs。我有两个组件,PrescriptionIndex和PrescriptionNew,它们相互集成。
这是我的第一个组件“ PrescriptionNew”
import React, { Component } from 'react';
import FloatingActionButton from 'material-ui/FloatingActionButton';
import ContentAdd from 'material-ui/svg-icons/content/add';
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider'
class PrescriptionNew extends Component {
render(){
return(
<div>
<MuiThemeProvider>
<FloatingActionButton mini={true} style={{"color": "pink"}}>
<ContentAdd/>
</FloatingActionButton>
</MuiThemeProvider>
</div>
)
}
}
export default PrescriptionNew;
这是我的另一个组件“ PrescriptionIndex”
import React , { Component } from 'react';
import { connect } from "react-redux";
import { fetchPrescriptionFromUrl } from '../actions/index.js';
import { Link } from 'react-router';
import PrescriptionNew from './new.jsx';
import '../app.css';
class PrescriptionIndex extends Component {
componentDidMount(){
this.props.fetchData(PORT+'/prescriptions');
}
render() {
if (this.props.has_error){
return(<p> Fetching an Api results in error</p>)
}
if (this.props.has_loading){
return(<p> Loading...</p>)
}
if (this.props.prescriptions.prescriptions !== undefined) {
return this.props.prescriptions.prescriptions.map(function(data){
return (
<div className="image-prescription" key={data.id}>
<Link to={"/update/" + data.id} >
<img src={data.image_path.image_path.url}
className="prescription-image"
alt="prescription"
/>
</Link>
</div>
);
});
} else {
return null;
}
return(
<div>
<PrescriptionNew /> //this is where I need my another component
</div>
)
}
}
export default PrescriptionIndex;
在运行时,“ PrescriptionNew”组件不可见。在检查控制台时,警告表示为“无法访问的代码”。我已经尝试过其他解决方案,但是我无法研究代码中出了什么问题。
原因很简单,您有一个if-else,并且您都从两者中返回,因此代码的最后一部分无法访问
你可能想要这个
import React , { Component } from 'react';
import { connect } from "react-redux";
import { fetchPrescriptionFromUrl } from '../actions/index.js';
import { Link } from 'react-router';
import PrescriptionNew from './new.jsx';
import '../app.css';
class PrescriptionIndex extends Component {
componentDidMount(){
this.props.fetchData(PORT+'/prescriptions');
}
render() {
if (this.props.has_error){
return(<p> Fetching an Api results in error</p>)
}
if (this.props.has_loading){
return(<p> Loading...</p>)
}
return(
<div>
<PrescriptionNew />
{this.props.prescriptions.prescriptions && this.props.prescriptions.prescriptions.map(function(data){
return (
<div className="image-prescription" key={data.id}>
<Link to={"/update/" + data.id} >
<img src={data.image_path.image_path.url}
className="prescription-image"
alt="prescription"
/>
</Link>
</div>
);
}); }
</div>
)
}
}
export default PrescriptionIndex;
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句