Question

我是新手，现在正在重写我的个人网络组合，以便更好地学习它。我无法获得每个项目的详细视图。当你单击div className =“view”时，我想要一个详细信息页面，用它的图像和副标题来调用web.subContent中的json。

目前，当你点击导航id =“nav”中的li时，我会看到要更改的页面状态，内容会将最高级别的json从web更改为print或photo.json中的照片。

我确定我在这里做了很多错事，并且非常希望能够帮助我正确地完成这项工作。这是我的github中所有代码的链接。 https://github.com/fitzmx6/reactportfolio/tree/master/coryfitzpatrick

content.js

import React from 'react';
import portfolioData from '../data/data.json';

export default class Content extends React.Component {
    constructor(props) {
        super(props);
        this.state = {activeCategory: portfolioData.web};
    }

    render() {
        var mainContent;
        if (this.state.activeCategory === portfolioData.contact) {
            mainContent = <div className="content">
                <div className="grid-d-12">
                    <h1>Contact Me</h1>
                    <p>Bio Here...</p>
                </div>
            </div>;
        } else {
            mainContent = <div className="content">
                {this.state.activeCategory.map(category => (
                   <div className="grid-d-4 grid-t-6 grid-panel cs-style-3">
                        <a href="/">
                            <figure>
                                <img src={category.imagePath} title={category.imageTitle} alt={category.name} />

                                <figcaption>
                                    <h2>{category.name}</h2>
                                    <div className="view">View</div>
                                </figcaption>
                            </figure>
                        </a>
                    </div>
                ))}
            </div>
        } 
        // else {
        //     mainContent = <div className="content">
        //        <div className="grid-12">
        //             <h1>portfolioData.web[0].subContent.subtitle</h1>
        //         </div>
        //    </div>
        // }

        return (
            <div>
                <div className="header">
                    <div className="grid-d-12">
                        <div id="logo">
                            <a href="/">
                                <h1>Cory Fitzpatrick |</h1>
                                <h2>Web Developer</h2>
                            </a> 
                        </div>

                        <nav id="nav">
                            <ul>
                                <li onClick={() => this.setState({ activeCategory: portfolioData.web })} className="menu-item">Web</li>
                                <li onClick={() => this.setState({ activeCategory: portfolioData.print })} className="menu-item">Print</li>
                                <li onClick={() => this.setState({ activeCategory: portfolioData.photo })} className="menu-item">Photography</li>
                                <li onClick={() => this.setState({ activeCategory: portfolioData.contact })} className="menu-item">Contact</li>
                            </ul>
                        </nav>
                    </div>
                </div>

                {mainContent}
            </div>
        );
    }
}

data.json

{
    "web": [
        {
            "name": "Web 1",
            "imagePath": "../images/cramer-thumb.jpg",
            "subContent": {
                "subTitle": "Cramer",
                "images": [
                    "../images/cramer-thumb.jpg",
                    "../images/cramer-thumb.jpg",
                    "../images/cramer-thumb.jpg"
                ],
                "link": "www.cramer.com"
            }
        }, {
            "name": "Web 2",
            "imagePath": "../images/earx-thumb.jpg",
            "subContent": {
                "subTitle": "Cramer",
                "images": [
                    "../images/cramer-thumb.jpg",
                    "../images/cramer-thumb.jpg",
                    "../images/cramer-thumb.jpg"
                ],
                "link": "www.cramer.com"
            }
        }, {
            "name": "Web 3",
            "imagePath": "../images/inlight-thumb.jpg",
            "subContent": {
                "subTitle": "Cramer",
                "images": [
                    "../images/cramer-thumb.jpg",
                    "../images/cramer-thumb.jpg",
                    "../images/cramer-thumb.jpg"
                ],
                "link": "www.cramer.com"
            }
        }
    ],
    "print": [
        {
            "name": "Print 1",
            "imagePath": "../images/earx-thumb.jpg",
            "subContent": {
                "subTitle": "Cramer",
                "images": [
                    "../images/cramer-thumb.jpg",
                    "../images/cramer-thumb.jpg",
                    "../images/cramer-thumb.jpg"
                ],
                "link": "www.cramer.com"
            }
        }, {
            "name": "Print 2",
            "imagePath": "../images/inlight-thumb.jpg",
            "subContent": {
                "subTitle": "Cramer",
                "images": [
                    "../images/cramer-thumb.jpg",
                    "../images/cramer-thumb.jpg",
                    "../images/cramer-thumb.jpg"
                ],
                "link": "www.cramer.com"
            }
        },{
            "name": "Print 3",
            "imagePath": "../images/cramer-thumb.jpg",
            "subContent": {
                "subTitle": "Cramer",
                "images": [
                    "../images/cramer-thumb.jpg",
                    "../images/cramer-thumb.jpg",
                    "../images/cramer-thumb.jpg"
                ],
                "link": "www.cramer.com"
            }
        }
    ],
    "photo": [
        {
            "name": "Photo 1",
            "imagePath": "../images/cramer-thumb.jpg",
            "subContent": {
                "subTitle": "Cramer",
                "images": [
                    "../images/cramer-thumb.jpg",
                    "../images/cramer-thumb.jpg",
                    "../images/cramer-thumb.jpg"
                ],
                "link": "www.cramer.com"
            }
        }, {
            "name": "Photo 2",
            "imagePath": "../images/inlight-thumb.jpg",
            "subContent": {
                "subTitle": "Cramer",
                "images": [
                    "../images/cramer-thumb.jpg",
                    "../images/cramer-thumb.jpg",
                    "../images/cramer-thumb.jpg"
                ],
                "link": "www.cramer.com"
            }
        }, {
            "name": "Photo 3",
            "imagePath": "../images/earx-thumb.jpg",
            "subContent": {
                "subTitle": "Cramer",
                "images": [
                    "../images/cramer-thumb.jpg",
                    "../images/cramer-thumb.jpg",
                    "../images/cramer-thumb.jpg"
                ],
                "link": "www.cramer.com"
            }
        }
    ],
    "contact": {
        "name": "Cory Fitzpatrick",
        "bio": "I am Awesome!"
    }
}

Answer 1

您应该开始在组件中拆分您的应用，例如组件标题，内容，联系人，而对于你的州，你只需拥有相同的onClick按钮来检查li的标签，然后设置一个独特的内容状态来显示，例如

React：需要帮助更改点击循环数据时使用的数据和html

1 个答案: