Javascript RACTJS不能与Zurb基金会手风琴一起使用吗？

我试图使用React来创建应该是手风琴的

ul

组件。在我使用反应之前，我使用它，但是当我使用它时，基础手风琴不起作用。当我点击手风琴时，它的内容就隐藏了

var pairingLi = React.createClass({
  return (
        <ul className='accordion submissionHolder no-bullet' data-accordian="">
            {
                this.props.data.map(function (pairingData) {
                    var id = "pairing_" + pairingData.pairingID;
                    var contentId = "content_" + pairingData.pairingID;
                    console.log(parseFloat(pairingData.pairingRate) * 100);
                    var fill = parseInt(parseFloat(pairingData.pairingRate) * 100);
                    var link = '#' + contentId;
                    return (
                        <li key={pairingData.pairingID} id={id} className='questionGroup accordion-navigation'>
                            <a href={link}>
                                <div className="back percentFill" data-value={fill} data-question-type="2"></div>
                                <div className="front">
                                    <i className="fa fa-2x fa-angle-down pull-right"></i>

                                    <div>{pairingData.itemName} to {pairingData.secondaryItemName}</div>
                                    <div>Pairing Success Rate: {pairingData.formattedRate}</div>
                                </div>
                            </a>

                            <div id={contentId} className="content">
                                <div className="surveyItem row">
                                    <div className="small-6 columns surveyItemLabel">
                                        Number of prompts:
                                    </div>
                                    <div className="small-6 columns surveyItemValue">
                                        {pairingData.pairingPrompts}
                                    </div>
                                    <div className="small-6 columns surveyItemLabel">
                                        Number of times user said yes to pairing prompt:
                                    </div>
                                    <div className="small-6 columns surveyItemValue">
                                        {pairingData.promptsYes}
                                    </div>
                                    <div className="small-6 columns surveyItemLabel">
                                        Number of times user said no to pairing prompt:
                                    </div>
                                    <div className="small-6 columns surveyItemValue">
                                        {pairingData.promptsNo}
                                    </div>
                                    <div className="small-6 columns surveyItemLabel">
                                        Total revenue generated from pairing:
                                    </div>
                                    <div className="small-6 columns surveyItemValue">
                                        {pairingData.formattedUpsale}
                                    </div>
                                </div>
                            </div>

                        </li>
                    );
                })
                }
        </ul>
    );
});

var pairingLi=React.createClass({
返回(

{
this.props.data.map（函数（pairingData）{
var id=“pairing\”+pairingData.pairingID；
var contentId=“content\ux”+pairingData.pairingID；
console.log（parseFloat（pairingData.pairingRate）*100）；
var fill=parseInt（parseFloat（pairingData.pairingRate）*100）；
var link='#'+contentId；
返回(

提示数：
{pairingData.pairingPrompts}
用户对配对提示说“是”的次数：
{pairingData.promptsys}
用户对配对提示说“否”的次数：
{pairingData.promptsNo}
配对产生的总收入：
{pairingData.formattedUpsale}

);
})
}

);
});

---

我在里面有生命周期方法，但是所有的东西都被注释掉了。

如果没有其余的组件代码，很难确切地说如何解决您的问题，但是我已经包装了一些我使用的非react内部工具，使用了一些接近以下的工具：

    React.createClass
        displayName: "myPluginWrapper"

        componentDidMount: ->
            @$element = $( @getDomNode() )
            @renderPluginContent()

            @$element.plugin(@props.pluginOpts)

        renderPluginContent: (props) ->
          props = props or @props
          React.renderComponent(<div>{props.children}</div>, @$element[0])

        componentWillReceiveProps: (newProps)-> 
            #check for whatever options have changed or if u
            #are changing the elements that u are passing in here   

            if newProps.children isnt @props.children
              @renderPluginContent(newProps)

            if newProps.pluginOpts isnt @props.pluginOpts
              #if hte options have changed then do what u need to
              #to pass them back through
              @$element(newProps.pluginOpts)

        onClose: ->
          React.unmountComponentAtNode(@vex[0])

        render: ->
          <div />

React.createClass
displayName:“myPluginWrapper”
组件安装：->
@$element=$（@getDomNode（））
@renderPluginContent（）
@$element.plugin（@props.pluginOpts）
renderPluginContent：（道具）->
道具=道具或@props
React.renderComponent（{props.children}，@$element[0]）
组件将接收道具：（新道具）->
#检查任何选项是否已更改，或者
#正在改变u在这里传递的元素
如果newProps.children不是@props.children
@renderPluginContent（新道具）
如果newProps.pluginOpts不是@props.pluginOpts
#如果选项已更改，则执行您需要的操作
#把它们传回去
@$element（newProps.pluginOpts）
onClose:->
React.unmountComponentAtNode（@vex[0]）
渲染：->

用法

#你所有的手风琴标记



您能提供其余的组件代码吗？最终，您可能只需要很少的努力就可以使用react构建一个手风琴，并且仍然可以使用zurb样式。但是，如果你想使用他们的插件，你必须跳过一些障碍才能让它玩得很好。他们的许多组件都需要jQuery激活。你在这么做吗？@DimitriKennedy你还想看什么？我将发布整个组件代码。什么样的箍必须跳过？@ WieldPrayi，包括一个JuqRe.M.js附带的基础。当然-但是Zurb的代码必须实际“激活”组件。手风琴的网页上有以下信息：
      <myPluginWrapper pluginOpts={pluginOpts}>
        #all of your accordion markup
        <ul className="accordion-class">
            <li></li>
            <li></li>
        </ul
      </myPluginWrapper>