Antd

主题
ReactDOM.createPortal
使用此方法可以修改挂载DOM的节点, 也可以通过事件冒泡到指定挂载的节点上

Modal, Tooltip, Popover, Popconfirm 的 getPopupContainer 是通过 ReactDOM.createPortal 方法对挂载节点的修改, 通常是因为这种是固定(fixed) 节点,挂载在 body 上,作为body的子元素, 但有时是需要自定义修改

RC-Component

• overflow: 用于展示多个 Tag 或者文本

  常见问题

  穿梭框 Transfer

• 使用搜索框时, 无论数据从 state 或者 props 传递, 在 filterOption 时 return false; onSearch 事件中不能使用异步加载事件, 尝试使用 setTimeout 模拟异步, 在 render 中 打印数据已经变动, 但子组件 Transfer 更新无效

• 综上所述: 初步判定为 ~~[Transfer](https://ant.design/components/transfer-cn/) 并不支持使用搜索异步加载数据~~

• 尝试使用 componentDidUpdate 对 prevState state 比较, 强制更新
• 异步操作中 更新数据后 调用强制更新

测试DEMO 尝试解决方案如 问题

• 同时使用 filterOption 和 onSearch , filterOption 不能 return false; 必须返回正确的判断规则
• 单独使用 onSearch 异步加载完成之前会出现旧数据过滤

• 貌似也没有使用 forceUpdate 也可以更新数据
• 如果还不能正确展示数据时, 参考 45 行, 调用强制更新, 若在 dva 中, dispatch 后返回 promise, then 回调中调用 forceUpdate, 若使用的并非返回 promise, 在请求成功后添加回调方法中调用 forceUpdate
• 官网未给定 demo展示, 初步判定本身组件并不支持异步加载
• 官网少了一个API notFoundContent(自定义数据为空) 在 locale 中, 可直接使用
• 需要添加loading
• 缺少 API body 同 footer 使用一致

• 
  

import React from 'react';
import { Transfer, Spin } from 'antd';
import { isEqual, isNumber, throttle } from 'loadsh';
let n = 0;
class App extends React.Component {
    constructor() {
        super();
        this.state = {
        mockData: [],
        targetKeys: [],
      loading: false,
      }
        this.getMock = throttle(this.getMock, 1000);
    }
  componentDidMount() {
    this.getMock(5);
  }
//     componentDidUpdate(prevProps, prevState) {        
//         if (!isEqual(prevState, this.state)) {
//             this.forceUpdate();
//         }
//     }
  getMock = (value) => {
    this.setState({ loading: true });
    const m = isNumber(value) ? value : 5;
    const targetKeys = [];
    const mockData = [];
    n += 1;
    for (let i = 0; i < m; i++) {
      const data = {
        key: `${i + n}${value}`,
        title: `content${i + n}${value}`,
        description: `description of content${i + n}`,
        chosen: Math.random() * 2 > 1,
      };
      // if (data.chosen) {
      //   targetKeys.push(data.key);
      // }
      mockData.push(data);
    }
    setTimeout(() => {
      this.setState({ mockData, targetKeys, loading: false }, () => {
        // this.forceUpdate();       
      });
    }, 1000);
  }
  // filterOption = (inputValue, option) => {
  //   return option.key.indexOf(inputValue) > -1;
  // }
  // handleChange = (targetKeys) => {
  //   this.setState({ targetKeys });
  // }
  handleSearch = (dir, value) => {
    if (dir === 'left') {
        this.getMock(value);
    }
    // console.log('search:', dir, value);
  };
    renderBody = (props) => {
    console.log(props, '>>>>>>');
    return (<div>body</div>);
  };
  render() {
    const { mockData, loading } = this.state;
    const notFoundContent = loading ? <Spin /> : '无数据';
    console.log(mockData, 'render>>>>>>>>>');
    return (
      <Transfer
        rowKey={record => record.key}
        dataSource={mockData}
        showSearch
        // filterOption={this.filterOption}
        targetKeys={this.state.targetKeys}
        onChange={this.handleChange}
        onSearch={this.handleSearch}
        render={item => item.title}
        notFoundContent={notFoundContent}
        // body={this.renderBody}
      />
    );
  }
}
ReactDOM.render(<App />, mountNode);