ReactJs 无法在两个组件之间进行通信

Question

我是新手，如果我的问题很愚蠢，请提前致歉。

projects 是我从 App.js

得到的数组

(Project.js)

import React, { Component } from 'react';
import ProjectItem from './ProjectItem'

class Projects extends Component {
  render() {
    //====== PROJECTS IS AN ARRAY IAM GETTING FROM App.js====
    let projectItems;
    if(this.props.projects){
      projectItems = this.props.projects.map(project => {
        return(
          <ProjectItem key={project.title} project={project} />

        );
      }); // projects map end
    }//==if end
    // ====== RETURN PROJECTS ======
    return (
      <div className="Projects">
          <h1>Projects</h1>
          <p>{this.props.projects[0].title}</p>
      </div>
    );
  }
}

export default Projects;

这里我无法从Project.js

获取道具

ProjectItem.js

import React, { Component } from 'react';

class ProjectItem extends Component {
  render() {
    console.log(this.props);
    return (
      <li className="Project">
        {this.props.project.title}

      </li>
    );
  }
}

export default ProjectItem;

请帮助并提前致谢。

Answer 1

虽然您会认为您已经通过映射 projects array 创建了项目列表，但除非您从组件 return 它，否则您将无法显示道具。

您需要将 projectItems 添加到您的 return 函数中，例如

import React, { Component } from 'react';
import ProjectItem from './ProjectItem'

class Projects extends Component {
  render() {
    //====== PROJECTS IS AN ARRAY IAM GETTING FROM App.js====
    let projectItems;
    if(this.props.projects){
      projectItems = this.props.projects.map(project => {
        return(
          <ProjectItem key={project.title} project={project} />

        );
      }); // projects map end
    }//==if end
    // ====== RETURN PROJECTS ======
    return (
      <div className="Projects">
          <h1>Projects</h1>
          {projectItems}
      </div>
    );
  }
}

export default Projects;

ReactJs 无法在两个组件之间进行通信

ReactJs not able to communicate between two components

reactjs