Question

我正在构建一个使用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>
     );
   }
}

Answer 1

您绝对不需要为目录中的所有子文件夹创建单独的组件。可能你的routes配置看起来像这样：

<Route path="/index" component={Index} />
<Route path="/projects/:projectPath" component={Parent} />
...

在Parent组件中，您现在可以从道具中读取projectPath并将其传递给Project。

const projectPath = props.params.projectPath;
...
<Project path={projectPath} />

如何最好地将react-router与动态内容一起使用？

1 个答案: