Question

我在服务器端使用grommet UI库。我想在用户点击图片并向refux reducer发送动作时显示<Layer>（Document）弹出窗口。它设法显示弹出窗口，但是我收到此客户端错误

invariant.js:38 Uncaught Invariant Violation: addComponentAsRefTo(...): Only a ReactOwner can have refs. You might be adding a ref to a component that was not created inside a component's `render` method, or you have multiple copies of React loaded

仅在显示弹出窗口后显示。有谁知道我显示或隐藏弹出窗口的方式有什么问题？

class ItemImage extends React.Component {

    render(){
        return <div onClick={this.onClickPopUp.bind(this)}>
            {
                this.props.dialog?
                <Layer onClose={this._onClose} closer={true} flush={true}>
                    <div>Hello!!!!</div>
                </Layer>:""
            }
            <Image full="vertical" src={buildImageUrl(this.props)} size="small"/>
            </div>
    }
    onClickPopUp(){

        if(this.props.dialog){
            this.props.dispatch(hideDialogAction());
        }else{
            this.props.dispatch(showDialogAction());
        }
    }

    function showDialogAction(){
      return {
        type:ActionType.dialog,
        visible:true
      }
    }

    function hideDialogAction(){
        return {
          type:ActionType.dialog,
          visible:false
    }
  }
}

减速器：

export default function DialogReducer ( state = false, action){
    switch(action.type) {
        case ActionType.dialog:
            return action.visible;
        default:
            return state;
    }
}

Webpack配置：

module.exports = {
    module: {
        loaders: [
            {
                test: /\.js$/,
                loader: 'babel',
                include: APP_DIR,
                query: {
                    presets: ['es2015', 'react']
                }
            },
            {
                test: /\.css$/,
                loader: "style-loader!css-loader"
            },
            {
                test: /\.(png|woff|woff2|eot|ttf|svg)$/,
                loader: 'url-loader?limit=100000'
            },
            {
                test: /\.(png|jpg)$/,
                loader: 'file-loader'
            }
        ]
    },
    resolve: {
        alias: {
            react: path.resolve('./node_modules/react'),
        }
    },
    entry: APP_DIR + '/Item.js',
        devtool: 'source-map',
        output: {
            filename: 'Item.js',
            libraryTarget: 'umd',
            library: 'Item'
        },
        externals: [{
            react: {
                root: 'React',
                commonjs2: 'react',
                commonjs: 'react',
                amd: 'react'
            }
        }]
    }
};

堆栈跟踪：

invariant   @   invariant.js:38
addComponentAsRefTo @   ReactOwner.js:69
attachRef   @   ReactRef.js:23
ReactRef.attachRefs @   ReactRef.js:42
attachRefs  @   ReactReconciler.js:26
notifyAll   @   CallbackQueue.js:67
close   @   ReactReconcileTransaction.js:81
closeAll    @   Transaction.js:204
perform @   Transaction.js:151
batchedMountComponentIntoNode   @   ReactMount.js:126
perform @   Transaction.js:138
batchedUpdates  @   ReactDefaultBatchingStrategy.js:63
batchedUpdates  @   ReactUpdates.js:98
_renderNewRootComponent @   ReactMount.js:285
obj.(anonymous function)    @   backend.js:8365
_renderSubtreeIntoContainer @   ReactMount.js:371
render  @   ReactMount.js:392
_renderLayer    @   Layer.js:321
componentDidMount   @   Layer.js:235
invokeComponentDidMountWithTimer    @   ReactCompositeComponent.js?cd59:54
notifyAll   @   CallbackQueue.js?bea8:67
close   @   ReactReconcileTransaction.js?9178:81
closeAll    @   Transaction.js?6dff:204
perform @   Transaction.js?6dff:151
perform @   Transaction.js?6dff:138
perform @   ReactUpdates.js?ce09:90
flushBatchedUpdates @   ReactUpdates.js?ce09:173
closeAll    @   Transaction.js?6dff:204
perform @   Transaction.js?6dff:151
batchedUpdates  @   ReactDefaultBatchingStrategy.js?ef70:63
batchedUpdates  @   ReactUpdates.js?ce09:98
dispatchEvent   @   ReactEventListener.js?2365:150

Answer 1

我在webpack.config中添加了这个问题解决了这个问题：

    externals: [{
        react: {
            root: 'React',
            commonjs2: 'react',
            commonjs: 'react',
            amd: 'react',

        },
        "react-dom": "ReactDOM" <<=== this one is needed
    }]

但我会帮助那些了解幕后发生的事情的人提供有关此问题的解释。

addComponentAsRefTo仅在动态显示弹出窗口时出错

1 个答案: