Question

我是React的新手;并试图动态渲染各种各样的图像。我无法弄清楚如何从data.pageimg渲染所有嵌套图像。我尝试重新格式化文件，映射图像，似乎没有任何工作。路径是正确的，我很难过！

WorkPage.js:
import React from 'react';
import './Work.css';
import '../App.css';
import data from './data';
import { Link } from "react-router-dom";
import FontAwesome from 'react-fontawesome';
import { Col } from 'reactstrap';
import { Nav, NavItem } from "react-bootstrap";
import Grid from 'react-bootstrap/lib/Grid';


const WorkPage = (props) => {

    const workpage = data.get(props.match.params.link)
    if (!workpage) {
    return <div>Sorry, but this work page does not exist!</div>
    }



    return (
        <div className="App">
            <FontAwesome name="arrow-left" /><Link className="link" to='/work'> Back</Link>

            <div className="col-md-12 text-center">
              <h1>{workpage.name}: {workpage.type}</h1>
            </div>

            <div className="col-md-12">
                <h3>PROJECT DESCRIPTION</h3>
                <p className="paragraph">{workpage.project}</p>
                <h3>CHALLENGES</h3>
                <p className="paragraph">{workpage.challenges}</p>
                <h3>TOOLS</h3>
                <p className="paragraph">{workpage.tools}</p>
                <h3>FINAL RESULT</h3>
                <p className="paragraph">{workpage.result}</p>
            </div>    
            <div className="col-md-12" >
              <Grid>    
                <Col md="6">
                  <img className="img-responsive" alt="images" src={workpage.pageimg}/>
                </Col> 
             </Grid>    
            </div>
            <div className="col-md-12">
                <Nav justified>
                    <NavItem
                     eventKey={4}
                     href={`${workpage.site}`} target="_blank">
                     <h3>Link to {workpage.name}'s Website</h3>
                    </NavItem>
                </Nav>
            </div>    
        </div>
      )
    }

export default WorkPage;

data.js:
const data = {
  workcards: [
{
    img: "https://res.cloudinary.com/dmcdekker/image/upload/c_scale,h_432,w_648/v1504041011/jim_card2_dkl0op.png",
    name: "Some Name",
    type: "Web Development",
    link: "somename",
    number: 8,
    pageimg: [
        "img1",
        "img2",
        "img3",
        "img4"
        ]
},

{
    img: "https://res.cloudinary.com/dmcdekker/image/upload/c_scale,h_432,w_648/v1492138087/Screen_Shot_2017-04-13_at_3.45.21_PM_qpr2vu.png",
    name: "Another Name",
    type: "Product Dev/UX/UI Design",
    link: "anothername",
    number: 7,
    result: "Something about the result",
    pageimg: [
        "img1",
        "img2",
        "img3"
        ]
}

非常感谢任何帮助或建议！提前谢谢。

Answer 1

类似的东西：

    const images = workpage.pageimg.map(img =>
        <img className="img-responsive" alt="images" src={img} />
    );

    return (
        <div>{images}</div>
    )

反应：动态渲染嵌套图像

1 个答案: