时间戳

首页 > 解决方案 > 通过 ReactJs 中的事件处理创建内容以传递给子级

javascript - 通过 ReactJs 中的事件处理创建内容以传递给子级

问题描述

我有一个要求，我正在制作一个可重用的模式，其结构如下所示：

--Parent.js
  --ModalComponent.js

在父级中，我正在单击为模态创建内容，

getModalContent = () => {
   let ModalBody = (
     <div onClick={this.clickableHandler}> //I want this clickableHandler to trigger in child(modal component)
       This is clickable
     </div>
   );
   this.setState({modalContent: ModalBody});
}
render(){
   return(
      <button onClick={this.getModalContent}>Open modal</button>
      <ModalComponent modalContent={this.state.ModalContent}/>
   );
}

在子（模态）组件中，单击该 div 时，我希望触发 clickableHandler 函数。模态组件.js----

import React, {Component} from 'react';
class ModalComponent extends Component{
   clickableHandler = () => {
      console.log('I am clicked');
   }
   render(){
       return (
          <div>
             {this.props.modalContent}
          </div>
       );
   }
}

但是通过这样做，我没有让函数 clickableHandler() 函数在模态（即子组件）中被触发。让我知道我哪里出错了。

标签： javascriptreactjs

解决方案

由于clickHandler实际上是在内部定义的，并且您正在提供来自 Parent 组件的内容，因此在likeModalComponent中使用它可能是一个好主意renderPropsModalComponent

import React, {Component} from 'react';
class ModalComponent extends Component{
   clickableHandler = () => {
      console.log('I am clicked');
   }
   render(){
       return this.props.children(this.clickableHandler);
   }
}

并像使用它一样

getModalContent = (clickableHandler) => {
   return (
     <div onClick={clickableHandler}> 
       This is clickable
     </div>
   );
}
render(){
   return(
      <button onClick={this.getModalContent}>Open modal</button>
      <ModalComponent>
          {getModalContent}
      </ModalComponent>

   );
}

推荐阅读