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的頁面進行頁面重新渲染。