Javascript 单击时插入组件，单击其他组件时删除组件

ContentWithFooter

有

卡的列表。每个
卡都有一个菜单，可以标记或删除该卡（文章）。单击
图标
时，我只想插入该卡的菜单（
），而不是所有卡。此外，在插入菜单后，单击该菜单以外的其他菜单时，将其从菜单组件中删除。我该怎么做？我知道这是一个很长的清单，但你的帮助将真正帮助我了解更多。多谢各位

ContentWithFooter.js：

class ContentWithFooter extends React.Component {
    render() {
        return(
            <div>
                <Card/>
                <Card/>
                <Card/>
            </div>
        );
    }
}

class ContentWithFooter扩展了React.Component{
render（）{
返回(
);
}
}

Card.js

class Card extends React.Component {
    handleDeleteFlag() {
        return(
            // GET THE CLICKED OBJECT OF THIS CARD AND INSERT <DeleteFlagPost/>???
        );
    }
    render() {
        return(
            <article class="article">
            ...
                <div class="delete-flag-post-btn">
                    <i class="fa fa-ellipsis-v" aria-hidden="true" onClick={this.handleDeleteFlag}></i>

                    // INSERT THE <DeleteFlagPost/> here when clicked on I element...

                </div>
            ...
            ...
            </article>
        );
    }
}

类卡扩展React.Component{
handleDeleteFlag（）{
返回(
//获取此卡的单击对象并插入？？？
);
}
render（）{
返回(
...
//单击I元素时插入此处。。。
...
...
);
}
}
将活动卡保留在contentwithfooter中
类ContentWithFooter扩展React.Component{
更新预售卡（cardNumActive）{
这是我的国家({
名片
})
}
render（）{
返回(
);
}
}
类卡扩展了React.Component{
构造函数（）{
超级（道具）；
}
handleDeleteFlag（）{
this.props.updateMemorCards（this.props.cardNumber）
}
renderDeleteFlag（）{
如果（此.props.showMenu）{
返回（）
}
}
render（）{
返回(
...
{this.renderDeleteFlag（）}
...
...
);
将活动卡保留在contentwithfooter中
类ContentWithFooter扩展React.Component{
更新预售卡（cardNumActive）{
这是我的国家({
名片
})
}
render（）{
返回(
);
}
}
类卡扩展了React.Component{
构造函数（）{
超级（道具）；
}
handleDeleteFlag（）{
this.props.updateMemorCards（this.props.cardNumber）
}
renderDeleteFlag（）{
如果（此.props.showMenu）{
返回（）
}
}
render（）{
返回(
...
{this.renderDeleteFlag（）}
...
...
);
当单击该组件以外的组件时，如何删除该组件？当单击该组件以外的组件时，如何删除该组件？
Keep active card in the contentwithfooter

 class ContentWithFooter extends React.Component {
    updateMenuForCards(cardNumActive) {
      this.setState({
          cardNumActive
      })
    }
    render() {
        return(
            <div>
                <Card cardNumber= 0 showMenu={cardNumActive === 0} updateMenuForCards={updateMenuForCards}/>
                <Card cardNumber= 1 showMenu={cardNumActive === 0} updateMenuForCards={updateMenuForCards}/>
                <Card cardNumber= 2 showMenu={cardNumActive === 0} updateMenuForCards={updateMenuForCards}/>
            </div>
        );
    }
}

    class Card extends React.Component {
            constructor() {
               super(props);
            }

            handleDeleteFlag() {
                this.props.updateMenuForCards(this.props.cardNumber)
            }
            renderDeleteFlag() {
                if (this.props.showMenu) {
                    return (<DeleteFlag/>)
                }
            }
            render() {
                return(
                    <article class="article">
                    ...
                        <div class="delete-flag-post-btn">
                            <i class="fa fa-ellipsis-v" aria-hidden="true" onClick={this.handleDeleteFlag}></i>

                            {this.renderDeleteFlag()}

                        </div>
                    ...
                    ...
                    </article>
                );