我有一个父组件,可以显示和索引组件,也可以是特定项目。单击项目标题时,URL将更改为该项目ID。
然后使用项目标题作为该网址的一部分,从API调用中提取的资产构建项目。
如何直接导航到该项目实例(如果手动输入了URL,例如?
我试图尽量减少代码。如有必要,请尽快添加/省略以找到解决方案。
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import { BrowserRouter } from 'react-router-dom'
import { Route, Link, Redirect } from 'react-router-dom'
var Dropbox = require('dropbox');
var dbx = new Dropbox({ accessToken: ###### });
class Parent extends React.Component {
constructor(props){
super(props);
this.state = {
imageSource: [],
imageTitles: [],
setProjectTitle: null,
}
}
indexTitleClick(title) {
this.setState({
setProjectTitle: title,
});
}
componentDidMount(){
dbx.filesListFolder({path: ''})
.then(function(response) {
// make call To dropbox API, sets states for imageSource & imageTitles
});
}
render(){
if (typeof this.props.match.params.projectId === 'string') {
if (this.state.imageTitles.length > 0) {
return(
<div className="parentWrapper">
<Project title={this.state.imageTitles[parseInt((this.props.match.params.projectId),10)]}/>
</div>
);
} else {
return(
<div className="parentWrapper">
<p>foo</p>
</div>
);
}
} else {
return(
<div className="parentWrapper">
<Index imageSource={this.state.imageSource} imageTitles={this.state.imageTitles} indexTitleClick = {this.indexTitleClick}/>
</div>
);
}
}
}
class Index extends React.Component{
render(){
let titles = this.props.imageTitles.map((el, i) => <p>{el}</p>)
let images = this.props.imageSource.map((el, i) =>
<div key={i} className="imageContainer">
<Link className="imageTitle" to={`/folio/${i}`}>
<img key={i} alt={titles[i].props.children} className='indexImages' src={el} />
</Link>
<Link className="imageTitle" to={`/parent/${i}`}>{parent[i]}</Link>
</div>
)
return (
<div className="indexWrapper">
{images}
</div>
);
}
}
class Project extends React.Component{
constructor(){
super();
this.state = {
fileSource: [],
projectDescription: [],
projectLink: [],
projectVideoURL: [],
imageKey: 0,
}
}
componentDidMount(){
var that = this;
var sources = [];
var projectDescription = [];
var projectVideoURL = [];
var projectLink = [];
var link = "/"+this.props.title;
dbx.filesListFolder({path: link})
.then(function(response) {
// uses this.props.title to create link for dropbox API
});
}
render() {
return(
// renders project with files from linked folder
);
}
class App extends React.Component {
render(){
return(
<div className="contentWrapper">
<Route path="/parent/:projectId?" component={Parent}/>
<Redirect from="/" to="/parent" />
</div>
)
}
}
// ========================================
ReactDOM.render((
<BrowserRouter>
<App />
</BrowserRouter>),
document.getElementById('root')
);