使用reactjs在基础中打开模态

Question

我正在使用css的基础。单击图标以添加角色时，应显示模态。如何在不使用jquery的情况下打开模态？

这是我的代码

export default class Campaign extends Component {
  state = {
    adsShow: false,
    personasShow: false
  };

handlePersonasClick = () =>
  this.setState({ personasShow: !this.state.personasShow });

renderCampaigns = () => {
  return campaigns.map((campaign, i) => {
    return (
      <Collapsible
        key={campaign.name}
        trigger={this.campaignTitle(campaign)}
        classParentString="campaignsCollapse">
        <div className="Ads">
          <span className="cmpTitle">Ads</span>
          <span className="editCampaign">
            <FaPlusCircle onClick={this.handleClick} />
          </span>
        </div>
        <div className="AdsList">
          {this.state.adsShow
            ? <CreateNewAd
                personasClick={this.handlePersonasClick}
                personasShow={this.state.personasShow}
              />
            : null}
          {this.renderAdLists(campaign.ads)}
        </div>
      </Collapsible>
    );
  });
};
render() {
  return (
    <div style={{ padding: '10px 20px' }}>
      <h3>Campaigns</h3>
      <div className="campaignsContainer">
        {this.renderCampaigns()}
      </div>
    </div>
  );
}
}


const CreateNewAd = props => {
  return (
    <Collapsible trigger={adsTitle()} classParentString="adsCollapse" open>
      <p>
        Personas
        {' '}
        <span><FaPlusCircle onClick={props.personasClick} /></span>
        {props.personasShow ? <Personas /> : null}
      </p>
    </Collapsible>
  );
};

export const Personas = () => {
  return (
    <div
      id="myModal"
      className="reveal-modal"
      data-reveal
      aria-labelledby="modalTitle"
      aria-hidden="true"
      ref={modal => {
        this.modal = modal;
      }}
      role="dialog">
      <h2 id="modalTitle">Awesome. I have it.</h2>
      <a className="close-reveal-modal" aria-label="Close">×</a>
    </div>
  );
};

以下代码段位于CreateNewAd组件上，该组件是Campaign Component的子组件。单击FaPlusCircle图标时，应显示一个模态。如果按照从上到下的方法并且不使用jquery，我该怎么做？

更新

创建了一个沙箱。这是链接https://codesandbox.io/s/qx9Pv1lry。你必须点击杂志打印。手风琴菜单出现了。之后点击单击广告文字旁边的文字。在那里你会看到开放的模态文本。点击的地方应该打开一个问题的模态。