Question

使用Meteor 1.4，Flow Router和React，我需要执行一些JavaScript代码来初始化布局。目前，我有这个

FlowRouter.route('/', {
  name: 'Home',
  action() {
    mount(MainLayout, {
      content: <div>Home</div>
    });
  }
});

我需要执行此

$(function () {
  $('.button-collapse').sideNav();
  $('.parallax').parallax();
});

在布局HTML上。每次渲染MainLayout时都应该执行这段代码，并且在其他路径中将使用相同的布局（显然！）。

我应该在哪里放置布局初始化代码？

Answer 1

将其放入您的组件componentDidMount功能：

class MainLayout extends React.Component {
  componentDidMount() {
    $('.button-collapse').sideNav();
    $('.parallax').parallax();  
  }
}

...除非您想重新运行更新（例如包含儿童的道具更改时）：

class MainLayout extends React.Component {
  componentDidMount() {
    this.isMounted = true; 
    this.initialiseJQueryWidgets();
  }

  componentDidUpdate() {
    if (this.isMounted) // In case you're doing server-side rendering
      this.initialiseJQueryWidgets();
  }

  initialiseJQueryWidgets() {
    $('.button-collapse').sideNav();
    $('.parallax').parallax();  
  }
}

在呈现路线后，将JavaScript应用于React中的布局

1 个答案: