Support React 16

[yesmeck]

ant-design/ant-design#5377 (comment)
facebook/react#10294 (comment)

[coveralls]

Coverage increased (+0.6%) to 74.216% when pulling 3a9686d on react-16 into 402016e on master.

[coveralls]

Coverage increased (+0.5%) to 74.126% when pulling e74bc84 on react-16 into 402016e on master.

[coveralls]

Coverage increased (+0.5%) to 74.126% when pulling ea38de0 on react-16 into 402016e on master.

[coveralls]

Coverage increased (+0.5%) to 74.035% when pulling df5caa4 on react-16 into 402016e on master.

[afc163]

@benjycui ...

[yesmeck]

@benjycui

[benjycui]

我也是刚看到。。

[benjycui]

要同时兼容 React@15 和 React@16，所以不能直接返回一个 fragment

[yesmeck]

看上面👆，15 的话会直接返回。

[benjycui]

@afc163 这个问题还是存在的。。

[yesmeck]

Updated.

[coveralls]

Coverage increased (+0.6%) to 74.138% when pulling ae79e53 on react-16 into 010d15d on master.

[coveralls]

Coverage increased (+0.6%) to 74.227% when pulling 0d16889 on react-16 into 010d15d on master.

[coveralls]

Coverage increased (+0.6%) to 74.227% when pulling f893630 on react-16 into 010d15d on master.

[coveralls]

Coverage increased (+0.6%) to 74.227% when pulling 541ed9c on react-16 into 010d15d on master.

[coveralls]

Coverage increased (+0.6%) to 74.227% when pulling 3e4f45b on react-16 into 010d15d on master.

[benjycui]

@afc163 FYI，getPopupContainer 之类的 API，其实只会调用一次，并且之前一直就是这样。考虑到有 removeContainer 的需要，getPopupContainer 的确只能调用一次。

[afc163]

没懂，有啥问题。

如果父元素 dom 结构变了，可能需要调用多次吧。

[benjycui]

不缓存 getPopupContainer 的返回值其实也可以，只是每次 render 都需要对比当前返回值和之前的返回值，并相应的 mount unmount 节点。

[benjycui]

并且这样就要求用户的 getPopupContainer 必须稳定，不能出现以下的情况：

getPopupContainer() {
  const div = new div
  document.appendChild(div);
  return div;
}

[benjycui]

这样就是 breaking changes 了。

[yesmeck]

这个先保持原有的行为吧。

[benjycui]

没问题的话，下周一合并发布个 2.0 吧，rc-menu 这边直接用就好。

[benjycui]

[email protected]

[yesmeck]

这里引入了另外一个问题，因为要第二次 render 才能真正渲染 popup 的内容，导致第一次 componentDidMount 的时候会拿不到 popup 里内容的 ref。例子：

class Demo extends React.Component {
  componentDidMount() {
    console.log(this.box); // undefined
  }

  render() {
    const popup = (
      <div ref={node => this.box = node}>hello</div>
    );

    return (
      <Trigger popupVisible={true} popup={popup}>
        <div>hover me</div>
      </Trigger>
    )
  }
}

[benjycui]

可以加个 warning？如果没有其他办法的话。。

[silentcloud]

setTimeout 终极大法可以的

componentDidMount() {
  setTimeout(() => {
    console.log(this.box); 
  }, 0);
}

先这么处理，后面升个 break change

[benjycui]

setTimeout 终极大法可以的

问题是用户会困惑。

[yesmeck]

setTimeout 太挫了。

[silentcloud]

这个没办法，后面 去掉 getContainer 里 findDOMNode，那个回传参数没用 ；

setTimeout 太挫了。

是的，只是目前这种的解决方法了

[yesmeck]

想了下去掉 findDOMNode 也不行，因为 getContainer 的元素可能是父组件里的某个元素，那么如果在 render 里 createContainer 的话，那个元素其实还没渲染出来。