How to get all UIkit Accordions open on load with ReactJS and UIKit?

问题

I'm building a ReactJS app and using UIkit I'm using the accordion component and I want all of the accordions expanded on page load. I tried to using this piece of code:

UIkit.on('afterready.uk.dom', function() {
     var accordion = UIkit.accordion(UIkit.$('#my-accordion'), {collapse:false, showfirst: false});
     accordion.find('[data-wrapper]').each(function () {
         accordion.toggleItem(UIkit.$(this), true, false); // animated true and collapse false
    });
});

but I get an error on "UIkit.on", it seems that React cannot find the "UIkit" object.

In my React component I'm importing these:

    import 'uikit/js/uikit.js';
    import 'uikit/js/components/accordion.js';

I get this error:

system.src.js:5123 Uncaught (in promise) Error: (SystemJS) SyntaxError: https://localhost/js/components/Facets.js: Unexpected token (23:5) 21 | 22 | > 23 | UIkit.on('afterready.uk.dom', function() { | ^ 24 | var accordion = UIkit.accordion(UIkit.$('#facets'), {collapse:false, showfirst: false}); 25 | accordion.find('[data-wrapper]').each(function () { 26 | accordion.toggleItem(UIkit.$(this), true, false); // animated true and collapse false

回答1:

Being new to both UIkit and ReactJS, I was able to figure out the answer to my question above.

UIkit.on('afterready.uk.dom', function() {
 var accordion = UIkit.accordion(UIkit.$('#my-accordion'), {collapse:false, showfirst: false});
 accordion.find('[data-wrapper]').each(function () {
     accordion.toggleItem(UIkit.$(this), true, false); // animated true and collapse false
  });
});

This can be placed under:

import 'uikit/js/uikit.js';
import 'uikit/js/components/accordion.js';

But not inside of

export default class NameOfClass extends React.Component {...}

Then it works with UIkit that you are importing.

来源：https://stackoverflow.com/questions/41294524/how-to-get-all-uikit-accordions-open-on-load-with-reactjs-and-uikit

标签

reactjs

uikit