用变量的方式传React.Node会让react报错

[winguse]

_renderALert () {
    const message = (
      <div>
        <p>test</p>
      </div>
    )
    return <Alert message={message} type='info' />
}

invariant.js:38 Uncaught (in promise) Error: Objects are not valid as a React child (found: object with keys {info, success, error, warn, warning, loading, config, destroy}). If you meant to render a collection of children, use an array instead or wrap the object using createFragment(object) from the React add-ons. Check the render method of `Alert`

但是如果写成inline的是没问题的。。

[sorrycc]

这个和 babel-plugin-antd 有关?

[winguse]

我也不造为啥，就这么神奇。。。去掉插件这个它就听话了。

[winguse]

Promise 是因为我的render在一个promise之后，忽略它。。

[sorrycc]

没理解到出错的点在哪里，Alert 是从 antd 里 import 的? 还是因为定义了 message ? 给一个能重现的完整文件代码吧。

[winguse]

我找到原因了：

import React from 'react';
import { Alert, message } from 'antd';

export default class App extends React.Component {
  render() {
    const message = (<div><p>Test</p><p>Test</p></div>);
    return <Alert message={message} />;
  }
}

注意我的局部变量message和import { Alert, message } from 'antd';里面的message重名了，应该是局部变量在babel编译时出问题了。

[sorrycc]

这种情况很难处理，换个名字吧。

[winguse]

walk around是可以得，不过应该有个更优雅的办法。。