我正在构建一个使用Dropbox API的应用程序。
我有一个 index 组件,列出了Dropbox目录中的所有文件夹。
然后我有一个 projects 组件,当单击其中一个目录链接时,它会从它的父级接收道具。这将使用该文件夹目录中的图像填充组件。
使用react-router,我想修改目录名的url,并且该url只显示该文件夹。
我不确定最佳的继续方式 - 我是否需要为目录中的所有子文件夹创建单独的组件,或者是否还有一种方法可以动态更新一个组件?
我一直在研究 reacttraining 的 react-router 部分,但似乎无法找到我正在寻找的内容。
class Parent extends React.Component {
constructor(props){
super(props);
this.state = {
imageSource: [],
imageTitles: [],
setProjectTitle: null,
}
this.indexTitleClick = this.indexTitleClick.bind(this)
}
indexTitleClick(title) {
this.setState({
setProjectTitle: title,
});
}
componentDidMount(){
var sources = [];
var titles =[];
dbx.filesListFolder({path: ''})
.then(function(response) {
...
...
//pulling data from Dropbox api
...
...
.then(function(){
this.setState({
imageSource: sources,
imageTitles: titles,
});
});
}
render(){
return(
<div className="wrapper">
<Index imageSource={this.state.imageSource} imageTitles=
{this.state.imageTitles} indexTitleClick =
{this.indexTitleClick}/>
<Project title={this.state.setProjectTitle}/>
</div>
);
}
}
class Index extends React.Component{
render(){
if(!this.props.imageSource.length)
return null;
let titles = this.props.imageTitles.map((el, i) => <p>{el}</p>)
let links = this.props.imageTitles
let images = this.props.imageSource.map((el, i) =>
<div className="imageContainer">
<img key={i} className='indexImages' src={el} onClick =
{this.props.indexTitleClick.bind(this,titles[i])}/>
<Link to={"/projects/"+links[i]} className="imageTitle" onClick = {this.props.indexTitleClick.bind(this,titles[i])}>{titles[i]}
</Link>
</div>
);
return (
<div className="indexWrapper">
{images}
</div>
);
}
}
class Project extends React.Component{
constructor(){
super();
this.state = {
imageSource: [],
}
}
componentDidMount(){
var sources = [];
var link = "/"+this.props.title.props.children;
dbx.filesListFolder({path: link})
.then(function(response) {
...
...
//pulling data from Dropbox api
...
...
.then(function(){
this.setState({
imageSource: sources,
});
});
});
}
render() {
if(!this.state.imageSource.length)
return null;
let images = this.state.imageSource.map((el, i) =>
<img key={i} className='projectImages' src={el}/>
)
return (
<div className="projectWrapper">
<div className="imageWrapper">
{images}
</div>
<div className="projectHeader">
<div className="projectTitle">{this.props.title}</div>
<Link to ="/index" className="backBtn" onClick =
{this.props.projectBackClick}><p>Back</p></Link>
</div>
</div>
);
}
}
答案 0 :(得分:0)
您绝对不需要为目录中的所有子文件夹创建单独的组件。可能你的routes
配置看起来像这样:
<Route path="/index" component={Index} />
<Route path="/projects/:projectPath" component={Parent} />
...
在Parent
组件中,您现在可以从道具中读取projectPath
并将其传递给Project
。
const projectPath = props.params.projectPath;
...
<Project path={projectPath} />