小编r_c*_*ill的帖子

我有一个反应组件,我希望使用Dropbox api填充图像.api部分工作正常,但组件在数据通过之前呈现,因此数组为空.如何在组件具有所需数据之前延迟组件的渲染？

var fileList = [];
var images = [];
var imageSource = [];

class Foo extends React.Component {

 render(){
  dbx.filesListFolder({path: ''})
  .then(function(response) {
   fileList=response.entries;
   for(var i=0; i<fileList.length; i++){
    imageSource.push(fileList[0].path_lower);
   }
   console.log(imageSource);
   })

  for(var a=0; a<imageSource.length; a++){
   images.push(<img key={a} className='images'/>);
  }

  return (
   <div className="folioWrapper">
    {images}
   </div>
  );
 }
}

谢谢你的帮助!

我对反应非常陌生，但对其潜力感到兴奋。仍在掌握这一切的基础知识，因此任何解释将不胜感激。

我希望在用户单击“导航”组件中的按钮时呈现“关于”组件（目的是稍后切换此组件）。

我试图用我能想到的最简单的方式来做这件事，但这显然是非常错误的：

class Nav extends React.Component {

 renderAbout() {
  return (
   <About />
 );
 }

render() {
 return (
  <div className="Nav">
    <div className="Button-Container">
    <div className="Nav-Text About-Button">
      <h2 onClick={() => this.renderAbout()}>About</h2>
    </div>
    </div>
  </div>
  );
 }
}

这是否与更新“关于”组件的“状态”有关？

提前致谢。

我有一个从Dropbox中提取的图像和标题索引.我的目标是能够点击一个标题并加载一个特定的项目,但是现在我只是试图将点击的标题的数据传递给一个组件.

我在这里查看了React教程,文档和其他类似的问题(我担心这将被视为一个重复的问题),但我似乎无法找到一种方法来传递被点击的特定标题.我目前收到错误:无法读取undefined的属性'title'.

我已经设法通过console.log取出了特定的标题,并用所有标题填充了ProjectTitle组件,但我对这个看似简单的障碍感到难过.

谢谢

class ProjectTitle extends React.Component{
    render() {
        return <h1>{this.props.title}</h1>;
    }
}

class Index extends React.Component {
    constructor(){
        super();
        this.state = {
            imageSource: [],
            imageTitles: [],
        }
    }

    componentWillMount(){
        …
    }

    render(){
        if(!this.state.imageSource.length)
            return null;
        let titles = this.state.imageTitles.map((el, i) => <p>{el}</p>)
        let images = this.state.imageSource.map((el, i) =>

        <div className="imageContainer">
            <img key={i} className='images' src={el}/>
            <div className="imageTitle" onClick={() => 
                ProjectTitle.props.title(titles[i].props.children)}>{titles[i]}
            </div>
        </div>
        )

        return (
            <div className="wrapper">
                {images}
                <ProjectTitle />
            </div>

        );
    }
}

我有一个包含文件路径作为字符串的数组。我需要搜索这个数组并创建一个新数组，只包含那些包含某个单词的数组。我将如何创建包含“includes”方法的 if 语句？

到目前为止，这是我的代码：

var imagePaths = [...]

if(imagePaths.includes('index') === 'true'){
 ???
}

先感谢您