Question

我将一个函数传递给我的父（App）的孙子（SingleProject），它打开一个模型。孙子只是在孩子（画廊）中呈现一个li，显示一个图像列表（来自孙子）。我试图从孙子上的道具获取对象，将其传递回App，然后通过模态（Modal）显示有关图像的信息。保存有关图像的信息的对象存储在服务（module.exports）中。 openModal函数是传递给孙子的函数。 closeModal将传递给模态。我遇到了这个问题。任何帮助，将不胜感激。

// APP（父母）

class App extends Component {
constructor(props) {
super(props);

this.closeModal = this.closeModal.bind(this);
this.openModal = this.openModal.bind(this);

this.state = {
  open: false,
  projects: Service,
  selectedProject: Service[0]
}

    console.log('selectedProject: ', this.state.selectedProject)
}

closeModal(event) {
this.setState({open: false});
console.log('app: ', this.state.open);
}

openModal(event) {
this.setState({open: true});
console.log('app: ', this.state.open);
}

render() {
const show = {
  display: 'block'
};

const hide = {
  display: 'none'
};
return (
  <div>
    <div             style={this.state.open === false ? hide : show}>
      <Modal
        value={this.state.open}
        closeModal={this.closeModal}
        project={this.state.selectedProject}
      />
    </div>
    <Header />
    <Intro />
    <WhatIDo />
    <WhoIAm />
    <Gallery
      value={this.state.open}
      projects={this.state.projects}
      openModal={this.openModal}
    />
    <Contact />
    <Footer />
  </div>
 );
}
}

// GALLERY（孩子）

const Gallery = (props) => {
console.log('props: ', props)
const projectItems = props.projects.map(project => {
return (
  <SingleProject
    key={project.name}
    project={project}
    openModal={props.openModal}
  />
);
});

return (
<div className="gallery">
  <h3>My Work</h3>
  <ul>{projectItems}</ul>
</div>
);
}

// SINGLEPROJECT（孙子）

const SingleProject = (props) => {
return (
<li className="gallery-images">
  <img
    src={props.project.img}
    onClick={props.openModal}
  />
</li>
);
}

// MODAL（模态）

const Modal = (props) => {
return(
<div className="modal">
  <div
    className="modal-close"
    onClick={props.closeModal}
  />
  <ModalDesc project={props.project} />
</div>
);
}

// SERVICE

module.exports = [
{
name: 'xxx',
img: '.././images/gallery/xxx',
link: 'xxx',
tech: 'AngularJS, jQuery, HTML, CSS, PostgreSQL, Node.js, Gulp, Express.js',
desc: 'A clone of the Texas restaurant Dixie Chicken\'s website featuring a 
backend and some parallax effects. This site is not fully responsive.'
},
{
name: 'xxx',
img: '.././images/gallery/xx',
link: 'xxx',
tech: 'AngularJS, jQuery, HTML, CSS, PostgreSQL, Node.js, Gulp, Express.js',
desc: 'A fully responsive clone of the E-commerce website Stance. This was a 
group project. I did the set up of the backend, the endpoints, the frontend 
state management, the directives, most of the SQL files, the single products 
view, the login view, the account view, and the register view.'
},
{
name: 'xxx',
img: '.././images/gallery/xxx',
link: 'xxx',
tech: 'AngularJS, jQuery, HTML, CSS',
desc: 'A fully responsive site for The Battlefield Pilot Club.'
}
];

Answer 1

如果我理解您的需要，您希望将project信息传递给openModal方法

您只需对SingleProject组件进行小编辑

即可

const SingleProject = (props) => {
  return (
    <li className="gallery-images">
      <img
       src={props.project.img}
       onClick={() => props.openModal(props.project)}
      />
   </li>
  );
}

然后在您的openModal方法中，您可以设置selectedProject;

openModal(project) {
  this.setState({
    open: true,
    selectedProject: project,
  }, () => {
    console.log('app: ', this.state.open); // this will print "true"
  });
  console.log('app: ', this.state.open); // this will print "false"
}

说明：

我们不是将props.onClick传递给onClick的{{1}}道具，而是使用箭头函数将其包裹起来，该函数将使用<img/>对象调用props.onClick
当您使用project方法记录状态时，如果您希望打印openModal，则需要在回调中将其打印到true方法，因为setState调用不会立即设置类的状态，而是反应将批处理更新。 official documentation for the same here

如何在onclick处理程序中将prop从子节点传递回父节点然后再传递给React中的另一个组件？

1 个答案:

说明：