Javascript React onClick元素：调用另一个类元素

我试图实现一个模式弹出窗口（存储在postview类中），当在postcontainer类上的任何post中调用onclick时，它会出现。我是新手，所以我很喜欢你关于改进代码的建议

第1类（邮差） 这是显示一个数组中的多个post的主类。我希望当点击任何帖子时，模式显示在第2类中

import React, { Component, useState } from 'react';
import '../App.css';
import PostView from './PostView';
function RenderPost({posts}) {
    return (
     <div className="post-holder shadow-sm p-3 mb-4 bg-white rounded" key={posts.id} onClick={class postview class 2}>

    </div>
    );
}

const PostContainer = props => {

    const menu = props.posts.map(post => {
        return (
                <RenderPost posts={post} />
        )
    });

    return (
        <div className="container-fluid">
            <div className="row justify-content-center">
            <PostView />
               {menu}
            </div>
        </div>
    );
}

export default PostContainer;

import React，{Component，useState}来自'React'；
导入“../App.css”；
从“/PostView”导入PostView；
函数RenderPost（{posts}）{
返回(
);
}
const PostContainer=props=>{
const menu=props.posts.map（post=>{
返回(
)
});
返回(
{menu}
);
}
导出默认后容器；

第2类（后视图）

类PostView扩展组件{
建造师（道具）{
超级（道具）；
此.state={
伊斯莫达洛彭：是的，
}
this.toggleModal=this.toggleModal.bind（this）；
}
切换模式（e）{
e、 停止传播（）
这是我的国家({
isModalOpen:！this.state.isModalOpen
});
}
render（）{
返回(
e、 stopPropagation（）}>
&时代；
你好
);
}
}
导出默认后视图；

这可以通过在父组件中维护一个状态变量进行后期单击并通过prop将其传递给子组件来实现

PostContainer.js 并且可以在子组件的渲染功能中使用相同的post道具渲染post。

---

希望能有帮助

状态在单独的const内，RenderPost在cont外，可以通过任何方式将状态作为参数从const传递到function@JRS您已经可以通过renderPost函数中的posts参数访问各个帖子，然后，在每次单击post时，我们都会使用setPost钩子更新post状态，这会强制显示模式。@amavpanwar99请在上面提供的代码链接中检查如何调用RenderPost函数内部的setPost->返回->div中的代码。谢谢你的帮助

class PostView extends Component {

    constructor(props) {
        super(props);
        this.state = {
            isModalOpen : true,

        }
        this.toggleModal = this.toggleModal.bind(this);
    }

    toggleModal(e) {
        e.stopPropagation()
        this.setState({
          isModalOpen: !this.state.isModalOpen
        });
    }

    render() {
        return (
    <div className="shadow-sm p-2 mb-2 bg-white">
        <div 
           className="modal"
           style={{display: this.state.isModalOpen ? 'block' : 'none' }} 
           onClick={this.toggleModal} >
            <div 
               className="modal-content" 
               onClick={ e => e.stopPropagation() }  >
               <span 
                   className="close"
                   onClick={this.toggleModal}
                >&times;
               </span>
            <div className="container">
                <h3 className="form-header">Hello</h3>

              </div>
            </div>
         </div>
    </div>
        );
    }
}
export default PostView;

import React, { Component, useState } from 'react';
import '../App.css';
import PostView from './PostView';


const PostContainer = props => {
    const [post, setPost] = useState(false);

  function RenderPost({posts}) {
    return (
     <div className="post-holder shadow-sm p-3 mb-4 bg-white rounded" key={posts.id} onClick={setPost(posts)}>

    </div>
    );
  }


   const menu = props.posts.map(post => {
        return (
                <RenderPost posts={post} />
        )
    });

    return (
         <div className="container-fluid">
            <div className="row justify-content-center">
            <PostView post={post} />
               {menu}
            </div>
        </div>
     );
}

export default PostContainer;

constructor(props) {
    super(props);
    this.state = {
        isModalOpen : !!props.post,
    }
    this.toggleModal = this.toggleModal.bind(this);
}