"Function components cannot be given refs" 使用转发引用并在函数组件中连接

Question

>父组件(我删除了一些不相关的代码(：

import React, { useState, useCallback, useMemo, useRef, useEffect } from 'react
import InputItem from 'src/components/InputItem'
let tokenRef = useRef(null)
return (
<InputItem
ref={tokenRef}
placeHolder="xxxx"
/>
)
}
const mapStateToProps = ({ form }) => {
return {
form
}
}
const mapDispatchToProps = (dispatch, props) => {
return {}
}
export default connect(mapStateToProps, mapDispatchToProps)(Header)

子函数组件(我删除了一些不相关的代码(：

import React, {
useState,
useRef,
useMemo,
forwardRef,
useImperativeHandle,
Ref
} from 'react'
import './index.less'
import { connect } from 'react-redux'
interface IOwnProps {
placeHolder?: string
}
interface IStateProps {
form: any
}
interface IDispatchProps {
}
type IProps = IStateProps & IOwnProps & IDispatchProps
const InputItem = forwardRef((props: IProps, ref: Ref<any>) => {
const {
placeHolder,
} = props
const ipt = useRef(null)
useImperativeHandle(ref, () => {
return {
value: ipt.current.value,
focus: () => ipt.current.focus()
}
})
return (
<div className="input-item" style={style}>
<input
type="text"
placeholder={placeHolder}
ref={ipt}
></input>
</div>
)
})
const mapStateToProps = ({ form }) => {}
const mapDispatchToProps = (dispatch, props) => {}
export default connect(mapStateToProps, mapDispatchToProps)(InputItem)

我收到一条警告，说我不能在函数组件中使用 ref。但是，我确实在我的子组件中使用了forwardRef来避免此类问题，并且useRef包装组件的值更改为包装组件仍然不起作用。

警告：不能为函数组件提供引用。尝试访问 此引用将失败。你的意思是使用 React.forwardRef(( 吗？

Answer 1

您可以添加{ forwardRef : true }选项：

export default connect(
mapStateToProps, 
mapDispatchToProps,
null,
{ forwardRef: true } // this is the important line
)(InputItem)

const Comp = React.forwardRef(({counter, increment}, ref) => (
<div ref={ref}>
<p>Comp. counter state: {counter}</p>
<button onClick={increment}>Increment</button>
</div>
));
// a simple implementation with increment counter action
const store = Redux.createStore(s => s + 1, 0);
const mapStateToProps = state => ({ counter: state });
const mapDispatchToProps = dispatch => ({
increment: () => dispatch({type: "increment"})
});
const ConnectedComp = ReactRedux.connect(
mapStateToProps,
mapDispatchToProps,
null,
{ forwardRef: true } // this is the important line
)(Comp);
const App = () => {
const setBlueColor = () => ref.current.style.color = "blue"
const ref = React.useRef();
return (
<ReactRedux.Provider store={store}>
<ConnectedComp ref={ref} />
<button onClick={setBlueColor}>Set blue color</button>
</ReactRedux.Provider>
);
};
ReactDOM.render(<App />, document.getElementById("root"));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.13.0/umd/react.production.min.js" integrity="sha256-32Gmw5rBDXyMjg/73FgpukoTZdMrxuYW7tj8adbN8z4=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.13.0/umd/react-dom.production.min.js" integrity="sha256-bjQ42ac3EN0GqK40pC9gGi/YixvKyZ24qMP/9HiGW7w=" crossorigin="anonymous"></script>
<div id="root"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-redux/7.2.0/react-redux.min.js" integrity="sha256-JuJho1zqwIX4ytqII+qIgEoCrGDVSaM3+Ul7AtHv2zY=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/redux/4.0.5/redux.min.js" integrity="sha256-7nQo8jg3+LLQfXy/aqP5D6XtqDQRODTO18xBdHhQow4=" crossorigin="anonymous"></script>