Javascript 应用RACTJS基础的开放式模式 我正在使用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>
  );
};

导出默认类活动扩展组件{
状态={
adsShow：错，
人物秀：假
};
手把手笔杆=（）=>
this.setState（{personasShow:！this.state.personasShow}）；
渲染公司=（）=>{
返回活动.map（（活动，i）=>{
返回(
广告
{this.state.adsShow
? 
：null}
{this.renderAdLists（campaign.ads）}
);
});
};
render（）{
返回(
活动
{this.renderCompagins（）}
);
}
}
const CreateNewAd=props=>{
返回(

人物角色
{' '}
{props.personasShow？：null}

);
};
导出常量角色=（）=>{
返回(
{
this.modal=modal；
}}
role=“dialog”>
太棒了，我有。
。你必须点击杂志打印。一个手风琴菜单出现。然后点击广告文本旁边的点击文本。在那里你会看到打开模式文本。点击应该在哪里打开一个模式，这就是问题所在。
哪个
？看起来像
CreateNewAd
中的一个将要设置的状态，至少应该是r结束
角色
组件。它是否可见取决于模态本身的CSS。你的意思是说，CreateNewAd应该是有状态组件吗？不，但我看到两个
组件。一个在
CreateNewAd
中，另一个在
活动
中。活动

中的一个当前连接到一个非活动-存在的方法。如果你能将你正在使用的东西放到一个JSFIDLE中，这将非常有用。从显示的JS判断，我非常确定

角色
组件将被呈现。至于是否正确的CSS将显示它，这是一个不同的matterI创建了一个沙盒。这是链接。你必须点击杂志打印。一个手风琴菜单出现。然后点击广告文本旁边的点击文本。在那里你会看到打开模式文本。点击应该会打开一个模式，这就是问题所在。谢谢。