Question

让我们说我的状态包含代表不同数据类型对象的元素。每个元素可以有不同的分派动作

export default connect(
    (state) => {
      return {
          events: getRegisteredEventsList(state).map(item => {
            return {
              title: item.get('name'),
              actionButton: <a onClick={dispatch(someActionForThisSpecifiedItem(item))}>Custom Action</a>
            }
          })
    },
    (dispatch) => {
      return {

      }
    }
)(Dashboard)

实现这种模式的可靠方法是什么？我应该将dispatch方法放到我的容器的道具上吗？

我现在如何实现这一点：

export default connect(
    (state) => {
      return {
          events: getRegisteredEventsList(state).map(item => {
            return {
              title: item.get('name'),
              actionButton: ({dispatch}) => <a
                  className={"btn btn-success"}
                  onClick={() => dispatch(someActionForThisSpecifiedItem(item))}>Go To</a>
            }
          })
    }
)(Dashboard)

添加方法：

  renderActionButtons() {
    const { actionButtons, dispatch } = this.props
    return actionButtons.map(button => renderComponent(button, {
      dispatch
    }));
  }

进入我的虚拟组件 - 这违反了关注点的分离，因为我的视图组件现在需要知道并维护调度属性

我觉得这也可能是还是一个功能请求。

Answer 1

我会选择这样的东西，简单地说，你的状态是这样的：

const items = [{
  name: 'abc',
}, {
  name: 'def',
}];

链接组件，只需在单击

时调度操作即可

const Link = ({name, onClick}) => <a onClick={() => onClick(name)}>{name}</a>;

渲染链接组件接受以下道具：项目列表和能够调度动作的onClick函数

const RenderLinks = ({ items, onClick }) => (
  <div>
    {items.map(a =>
      <Link
        name={a.name}
        onClick={onClick}
      />)}
  </div>
);

const mapStateToProps = (state) => ({
  items,
});

onClick功能可以分派动作

const mapDispatchToProps = (dispatch) => ({
  onClick: (name) => dispatch({type: `${name.toUpperCase()}_CLICKED`}),
});

export default connect(mapStateToProps, mapDispatchToProps)(RenderLinks);

什么是为动态组件分派操作的可靠方法？

1 个答案: