Javascript 如何对此进行循环：

我仍在为React迈出第一步，如果你们能帮助我正确地做到这一点，我将不胜感激：

Projects.js：

class Projects extends React.Component {
render() {
    return (
       <div className='container-fluid wrapper'>
           <div className='row projects-widget'>
               <Project />
           </div>
       </div>
    );
}
}

类项目扩展React.Component{
render（）{
返回(
);
}
}

项目：

class Project extends React.Component {
render() {
    let pages = DataStore.getPageBySlug('homepage');

    let projectOneSlug = pages.acf.project_home_1.post_name;
    let projectOne = DataStore.getPageBySlug(projectOneSlug);
    let tagsOne = projectOne.acf.tags;
    let imgUrlOne = projectOne.acf.thumb_image;
    let divImageOne = { backgroundImage: 'url(' + imgUrlOne + ')'};

    let projectTwoSlug = pages.acf.project_home_2.post_name;
    let projectTwo = DataStore.getPageBySlug(projectTwoSlug);
    let tagsTwo = projectTwo.acf.tags;
    let imgUrlTwo = projectTwo.acf.thumb_image;
    var divImageTwo = { backgroundImage: 'url(' + imgUrlTwo + ')'};

    return (
        <div>
            <div className='col-xs-12 col-md-6 project-item' style={divImageOne}>
                <div className='project-overlay'>
                    <a href='javascript:void(0)'>
                        <img src={projectOne.acf.client_img} alt={projectOne.acf.client} />
                    </a>
                </div>
                <div className='project-overlay-hover'>
                    <div className='project-table'>
                        <div className='project-table-cell'>
                            <h3>{projectOne.acf.client}</h3>
                            <div className='tags'>
                                <ul>
                                    {tagsOne.map(function(category, index){
                                        let tag = DataStore.getCategoryByID(category);
                                        return <li key={index}>{tag.name}</li>
                                    })}
                                </ul>
                            </div>
                            <a href={projectOne.guid} className='btn btn-default'>View Work</a>
                        </div>
                    </div>
                </div>
            </div>
            <div className='col-xs-12 col-md-6 project-item' style={divImageTwo}>
                ...
        </div>
    );
}
}

类项目扩展React.Component{
render（）{
让pages=DataStore.getPageBySlug（“主页”）；
让projectOneSlug=pages.acf.project\u home\u 1.post\u name；
让projectOne=DataStore.getPageBySlug（projectOneSlug）；
设tagsOne=projectOne.acf.tags；
让imgUrlOne=projectOne.acf.thumb\u image；
让divImageOne={backgroundImage:'url（'+imgUrlOne+'）}；
让projectTwoSlug=pages.acf.project\u home\u 2.post\u name；
让projectTwo=DataStore.getPageBySlug（projectTwoSlug）；
设tagsTwo=projectTwo.acf.tags；
让imgUrlTwo=projectTwo.acf.thumb\u image；
var divImageTwo={backgroundImage:'url（'+imgUrlTwo+'）}；
返回(
{projectOne.acf.client}

{tagsOne.map（函数（类别，索引）{
让tag=DataStore.getCategoryByID（类别）；
return
{tag.name}
})}

...
);
}
}

我不知道怎么做，但理想情况下projects.js应该有2个元素，project.js应该只有这两个元素中的1个

我试过制作一个project.map和一些其他的“解决方案”，但我似乎找不到合适的解决方案

---

非常感谢您的帮助，或者您可以简单地为我指出正确的位置……

我想我不明白。您希望项目将所有数据存储映射为项目组件吗？我有两个项目（Project.js）出现在主项目文件（Project.js）中。目前，这两个项目正在扩大。我想做的是，在主projects.js文件中，有2个，在project.js文件中只有一个默认项目，该项目使用正确的内容填充。