Ant Design中根据用户交互展示不同的标签

Ant Design中根据用户交互展示不同的标签

Ant Design使用的是React框架，那么我们先看代码：

          <Fragment>
            <a onClick={() => this.viewDetail(obj)}>查看</a>
            <Divider type="vertical" />
            <a onClick={() => this.handelUpdate(obj)}>修改</a>
            <Divider type="vertical" />
            <a onClick={() => this.handleDelete(obj)}>删除</a>
            <Divider type="vertical" />
            {obj.recommend == 0 ? (
              <a onClick={() => this.handleRecommend(obj)}>设为推荐</a>
            ) : (
              <a onClick={() => this.handleRecommend(obj)}>取消推荐</a>
            )}
          </Fragment>

不用管头三个a标签，最后我写了两个a标签，他们根据obj中的“recommend”变量值进行动态的变化。值得说明的是，我并没有在这个页面设置自己的state，所以我在改变这个值后，页面是不会重新渲染的，也就是说，该a标签不会自动变换。

注意：React的机制是，只有当前页面（组件）的state数据发生变化，或父组件的state数据发生变化，才会重新渲染页面（组件）

解决方案

在前面的随笔中提到过，models即相当于是当前页面的父组件，那么既然我不想在当前页面的state中定义数据，那么我可以相应的models中改变state数据，这样也能实现页面的重新渲染。

    *apiSetRecommend({ payload }, { call, put }) {
      const response = yield call(apiSetRecommend, payload);
      if (isResponseSuccess(response)) {
        message.success('设置成功');
        yield put({
          type: 'setRecommend',
          payload: payload.activityId,
        });
      } else {
        message.error('设置失败:' + response.data.message);
      }
    },
    *apiRemoveRecommend({ payload }, { call, put }) {
      const response = yield call(apiRemoveRecommend, payload);
      if (isResponseSuccess(response)) {
        message.success('设置成功');
        yield put({
          type: 'removeRecommend',
          payload: payload.activityId,
        });
      } else {
        message.error('设置失败:' + response.data.message);
      }
    }

（1）在models的effects中写出相应要调用的接口。
（2）如果操作成功，则需要使用yield put转到reducers中进行处理。

    setRecommend(state, action) {
      for (var i = 0; i < state.list.length; i++) {
        if (state.list[i].id === action.payload) {
          state.list[i].recommend = 1;
        }
      }
      return {
        ...state,
      };
    },
    removeRecommend(state, action) {
      for (var i = 0; i < state.list.length; i++) {
        if (state.list[i].id === action.payload) {
          state.list[i].recommend = 0;
        }
      }
      return {
        ...state,
      };
    }

因为当前页面是一个table，即数据源是一个list，所以我需要在list中查找到相应的数据，并改变他的state数据。最后最重要的就是一定要return这个state，这样才能使绑定该models的页面进行页面重新渲染。