USAGE

Question

我正在尝试使用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>
    );
});

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

Answer 1

如果没有剩下的组件代码，很难确切地说明如何解决问题，但我已经使用了以下内容包含了一些我使用的非反应内部工具：

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

USAGE

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

ReactJS不能与Zurb Foundation Accordions合作吗？

1 个答案:

USAGE