我使用Typescript与React。我有麻烦理解如何使用参考，以获得静态类型和智能感知的反应节点引用的参考。我的代码如下。
import * as React from 'react';
interface AppState {
count: number;
}
interface AppProps {
steps: number;
}
interface AppRefs {
stepInput: HTMLInputElement;
}
export default class TestApp extends React.Component<AppProps, AppState> {
constructor(props: AppProps) {
super(props);
this.state = {
count: 0
};
}
incrementCounter() {
this.setState({count: this.state.count + 1});
}
render() {
return (
<div>
<h1>Hello World</h1>
<input type="text" ref="stepInput" />
<button onClick={() => this.incrementCounter()}>Increment</button>
Count : {this.state.count}
</div>
);
}}
反应。createRef(类比较)
class ClassApp extends React.Component {
inputRef = React.createRef<HTMLInputElement>();
render() {
return <input type="text" ref={this.inputRef} />
}
}
反应。useRef(钩子/函数比较)
a) Use readonly refs for React-managed DOM nodes:
const FunctionApp = () => {
// note the passed-in `null` arg ----------------v
const inputRef = React.useRef<HTMLInputElement>(null)
return <input type="text" ref={inputRef} />
}
inputRef。通过将Current属性的值初始化为null, Current属性变为只读属性。
b) Use
可变参
for arbitrary stored values akin to instance variables:
const FunctionApp = () => {
const renderCountRef = useRef(0)
useEffect(() => {
renderCountRef.current += 1
})
// ... other render code
}
注意:在这种情况下不要初始化useRef为null——它会使renderCountRef类型为只读(参见示例)。如果你需要提供null作为初始值，这样做:
const renderCountRef = useRef<number | null>(null)
回调引用(两个)
// Function component example, class analogue
const FunctionApp = () => {
const handleDomNodeChange = (domNode: HTMLInputElement | null) => {
// ... do something with changed dom node.
}
return <input type="text" ref={handleDomNodeChange} />
}
注意:字符串引用被认为是遗留的，在此回答的范围内被省略。
操场上的样品
反应。createRef(类比较)
class ClassApp extends React.Component {
inputRef = React.createRef<HTMLInputElement>();
render() {
return <input type="text" ref={this.inputRef} />
}
}
反应。useRef(钩子/函数比较)
a) Use readonly refs for React-managed DOM nodes:
const FunctionApp = () => {
// note the passed-in `null` arg ----------------v
const inputRef = React.useRef<HTMLInputElement>(null)
return <input type="text" ref={inputRef} />
}
inputRef。通过将Current属性的值初始化为null, Current属性变为只读属性。
b) Use
可变参
for arbitrary stored values akin to instance variables:
const FunctionApp = () => {
const renderCountRef = useRef(0)
useEffect(() => {
renderCountRef.current += 1
})
// ... other render code
}
注意:在这种情况下不要初始化useRef为null——它会使renderCountRef类型为只读(参见示例)。如果你需要提供null作为初始值，这样做:
const renderCountRef = useRef<number | null>(null)
回调引用(两个)
// Function component example, class analogue
const FunctionApp = () => {
const handleDomNodeChange = (domNode: HTMLInputElement | null) => {
// ... do something with changed dom node.
}
return <input type="text" ref={handleDomNodeChange} />
}
注意:字符串引用被认为是遗留的，在此回答的范围内被省略。
操场上的样品
来自React类型定义
type ReactInstance = Component<any, any> | Element;
....
refs: {
[key: string]: ReactInstance
};
你可以像下面这样访问你的refs元素
stepInput = () => ReactDOM.findDOMNode(this.refs['stepInput']);
没有重新定义refs索引。
正如@manakor提到的，你可能会得到这样的错误
属性“stepInput”在类型“{[key: string]”上不存在:
组件|元素;｝
如果你重新定义refs(取决于你使用的IDE和ts版本)
