Javascript React.js从js数组获取数据

Javascript React.js从js数组获取数据,javascript,reactjs,Javascript,Reactjs,我有以下代码: import React from 'react'; import ProjectsData from './projects.js'; class SingleProject extends React.Component { render () { return ( <div className="info-project-wrapper"> <h2>{this.pro

我有以下代码:

import React from 'react';

import ProjectsData from './projects.js';

class SingleProject extends React.Component {
    render () {
        return (
            <div className="info-project-wrapper">
                <h2>{this.props.title}</h2>
                <span className="show-for-large">{this.props.by}</span>
                <ul className="project-links show-for-large">
                    <li>{this.props.links}</li>
                </ul>
                <div className="info-project">
                    <p>VIEW NOW</p>
                </div>
            </div>
        )
    }
}

class SingleProjectWrapper extends React.Component {
    render () {
        var projects = [];
        this.props.projects.forEach(function(project, i){
            projects.push(<SingleProject title={project.title}  
                             by={project.by}
                             links={projects.links}
                             key={i} />);
        });
        return (
            <div className="single-project project-4">
                {projects}
            </div>
        )
    }
}

class Projects extends React.Component {
  render () {
    return (
        <section>
            <SingleProjectWrapper projects={ProjectsData} />
        </section>
    );
  }
}

export default Projects;

除了
  • {this.props.links}
  • 之外,大多数数据都能正确显示。我只得到一个空的
  • ,而不是每个链接的“link-1、link-2和link-3”。

    您需要迭代链接数组,React对数组没有任何作用

    所以不是

    <ul className="project-links show-for-large">
      <li>{this.props.links}</li>
    </ul>
    
    • {this.props.links}
    你需要这样做

    <ul className="project-links show-for-large">
        {this.props.links.map(i => <li>i</li>)}
    </ul>
    
      {this.props.links.map(i=>
    • i
    • )}

    您需要迭代链接数组,React不会对数组做任何花哨的事情

    所以不是

    <ul className="project-links show-for-large">
      <li>{this.props.links}</li>
    </ul>
    
    • {this.props.links}
    你需要这样做

    <ul className="project-links show-for-large">
        {this.props.links.map(i => <li>i</li>)}
    </ul>
    
      {this.props.links.map(i=>
    • i
    • )}

    不确定这是否是您的问题,但链接代码中有一个拼写错误:
    links={projects.links}
    。应该是
    links={project.links}
    不确定这是否是您的问题,但链接代码中有一个拼写错误:
    links={projects.links}
    。应该是
    links={project.links}