如何使用 ReactJS 和 UIKit 在加载时打开所有 UIkit Accordions? [英] How to get all UIkit Accordions open on load with ReactJS and UIKit?

问题描述

我正在构建一个 ReactJS 应用程序并使用 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
    });
});

但是我在UIkit.on"上遇到错误，React 似乎找不到UIkit"对象.

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

在我的 React 组件中，我正在导入这些:

In my React component I'm importing these:

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

我收到此错误:

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 |手风琴.find('[data-wrapper]').each(function () { 26 |手风琴.toggleItem(UIkit.$(this), true, false);//动画真和折叠假

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

推荐答案

作为 UIkit 和 ReactJS 的新手，我能够找出上述问题的答案.

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

这可以放在:

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

但不在里面

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

然后它可以与您正在导入的 UIkit 配合使用.

Then it works with UIkit that you are importing.

这篇关于如何使用 ReactJS 和 UIKit 在加载时打开所有 UIkit Accordions?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！