ReactJS不与Zurb Foundation Accorsions合作吗

Does ReactJS not work with Zurb Foundation Accordions?

本文关键字：Accorsions Foundation 不与 Zurb ReactJS      更新时间：2023-09-26

我正在尝试使用React创建ul组件，这些组件应该是手风琴。在我使用React之前，它就已经工作了，但当我使用它时，基础手风琴就不工作了。当我点击它们时，手风琴的内容就一直隐藏着。

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>
    );
});

我有生命周期方法，但所有内容都被注释掉了。

如果没有其余的组件代码，很难说如何准确地解决您的问题，但我已经包装了许多我使用的非反应内部工具，使用了类似以下的东西：

    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 />

用法

      <myPluginWrapper pluginOpts={pluginOpts}>
        #all of your accordion markup
        <ul className="accordion-class">
            <li></li>
            <li></li>
        </ul
      </myPluginWrapper>
相关文章：