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

解决这个问题：

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

不。它只返回一个属性current设置为null的Object。没有magic here。您只需在具有此类对象的组件中启动属性，然后将此对象的引用传递给组件。然后在某些时候重新分配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并重新安装

Answer 2

我的defaultProps遇到了问题。由于我们无法在useRef hook中使用defaultProps；这对我有用：

MyComponent.defaultProps = {
  formRef: React.createRef()
}

祝你好运...

React.createRef（）导致错误＆＃39;期望ref为函数或字符串＆＃39;

2 个答案: