Question

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

Projects.js：

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

项目：

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>
    );
}
}

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

我已经尝试制作了一个project.map和其他几个'解决方案'，但我似乎无法为此找到合适的解决方案。

非常感谢您的帮助，或者您可以简单地将我指向正确的位置......

如何制作一个循环：

0 个答案: