React：从类中触发操作

Question

我们正在重写currentntexpress / jade-frontend到reactjs。在我们当前的前端，我们有触发动作的类，例如显示一个bootstrap模式，如下所示：

$(document).on('click', '.showUserInfo', function(event) {
  $('#modal-userInfo').modal('show');
});

我们在解决方案中将这些类放在随机元素（div / buttons / html）上。触发操作的元素不同，但操作是相同的。

从概念上讲，我很难理解你将如何在React中做到这一点。我可以使用modal创建一个Component，并使用它包装元素（即不是将我用新组件包装的类）。但这不会在包装组件周围产生额外的元素吗？它会不会在代码周围的几个地方创建模态？

Answer 1

创建一个可用于包装其他元素的组件。

function ShowUserInfo(props) {
  return (
    <div onClick={actions.showModal}>
      {props.children};
    </div>
  );
}

如果您使用的是Flux，请确保您有一个相应的动作创建者，可以发送一个show modal动作。

const actions = {
  showModal() {
    dispatch({ type: 'SHOW_MODAL' });
  }
};

然后将其他React组件包装在这个新组件中，以便为它们提供此行为。

<ShowUserInfo>
  <ProfilePicture />
</ShowUserInfo>
<Username />