Question

我想在将操作分派给商店之前调用基于promise的函数。问题是我只想在显示组件时调用该函数。我使用切换操作来打开和关闭组件。

以下是我的代码示例：

if ( /*component is going to be displayed*/) {
  init().then(function() {
    store.dispatch(toggleSomething());
  });
}
else {
  store.dispatch(toggleSomething());
}

动作：

export const SomethingActions = {
  TOGGLE_SOMETHING: 'TOGGLE_SOMETHING'
};

export function toggleSomething() {
  return {
    type: SomethingActions.TOGGLE_SOMETHING
  };
}

减速机：

export default function somethingState(state = defaultState, action) {
  switch (action.type) {
  case somethingActions.TOGGLE_SOMETHING
    return Object.assign({}, state, { open: !state.open});

  default:
    return state;
  }
}

React组件的一部分：

Something.propTypes = {
  display: React.PropTypes.bool.isRequired
};

function mapStateToProps(state, ownProps) {
  return {
    display: state.something.open
  };
}

我基本上想知道上面组件的打开/显示的价值或者知道组件是否被显示的另一种方式。我不想污染渲染功能或存储每次调用调度时都会更改的bool。有没有办法做到这一点？

Answer 1

听起来，你想利用React的生命周期方法。特别是componentWillMount和componentWillReceiveProps。

componentWillReceiveProps没有被初始渲染触发，所以你可能想要将逻辑提取到一个单独的函数中，以便它可以重用于两个钩子：

function trigger(isDisplayed) {
  if (isDisplayed) {
    init().then(function() {
      store.dispatch(toggleSomething());
    });
  }
  else {
    store.dispatch(toggleSomething());
  }
}

componentWillMount() {
  trigger(this.props.display);
}

componentWillReceiveProps(nextProps) {
  trigger(nextProps.display);
}

Answer 2

Q1：＆＃34;问题是我只想在显示组件时调用该功能＆＃34;

A1：这肯定是反应生命周期方法的一个问题，特别是componentWillMount（）＆amp; componentDidMount（）

Q2：＆＃34;我基本上想知道上面组件的打开/显示的价值或者知道组件是否被显示的另一种方式。＆＃34;

A2：渲染组件时将调用componentDidMount（）方法。要防止组件在呈现时调用您的承诺的无限循环，只是在状态更改时再次调用promise，请避免在组件中包含切换状态。调度组件安装时的操作，切换商店中的状态，但不要在此组件中使用此状态。这样，您就可以了解是否在没有UI更新的情况下呈现组件。我希望有所帮助！

import React from 'react'; class StackOverFlow extends React.Component { constructor(props) { super(props); } componentDidMount() { toggleSomethingOn(); } componentWillUnmount() { toggleSomethingOff(); } render() { return ( <div> The component has been rendered! <br /> </div> ); } } function toggleSomethingOn() { //dispatches action to toggle state "open" } function toggleSomethingOff() { //dispatches action to toggle state "closed" } export default StackOverFlow;

A2：如果您只是想知道某个组件是否已经呈现（代码之外），您可以访问浏览器的开发人员工具并搜索元素/ DOM以获取组件html

查找是否显示React组件

2 个答案: