React.createRef()导致错误'预期ref为函数或字符串'

Question

我将我的React升级到16.3.2并使用React.createRef()如下所示:https://reactjs.org/docs/react-api.html#reactcreateref

但是当我收到以下错误时:

Uncaught Error: Expected ref to be a function or a string.

当我看看React.createRef()实际返回的函数时,我看到了:

{ current: null }

这里出了什么问题？实施是否改变了？

我使用react-router-dom进行路由,而我的组件是一个class组件.

编辑:这是我的代码:

export class MyComponent extends Component { 
    constructor(props) {
        super(props);

        this.cardRef = React.createRef();
    }

    render() {
        return (
            <div>
                ...
                <Card ref={this.cardRef}>
                    ...
                </Card>
            </div>
        );
    }
}

Answer 1

要解决这个问题:

这里出了什么问题？实施是否改变了？

不.它只返回一个Object,其属性current设置为null.这里没有魔力.您只需在具有此类对象的组件中启动属性,然后将此对象的引用传递给组件.然后在某些时候反应重新分配current.

this.component = React.createRef() // this.component = { current: null }
// we pass a reference to object above and react will mutate current property at some point
<div ref={this.component} />

错误消息似乎表明您仍在使用旧版本的react.我建议的是

• 确保你在package.json中声明了两者的最新版本react和react-dom(16.3.2)
• 然后删除node_modules并重新安装