只是添加一个不同的方法-你可以简单地强制转换你的引用，像这样:

let myInputElement: Element = this.refs["myInput"] as Element

当你有一个元素数组的时候，你可以这样做:

const textInputRefs = useRef<(HTMLDivElement | null)[]>([])

...

const onClickFocus = (event: React.BaseSyntheticEvent, index: number) => {
    textInputRefs.current[index]?.focus()
};

...

{items.map((item, index) => (
    <textInput
        inputRef={(ref) => textInputs.current[index] = ref}
    />
    <Button
        onClick={event => onClickFocus(event, index)}
    />
}

class SelfFocusingInput extends React.Component<{ value: string, onChange: (value: string) => any }, {}>{
    ctrls: {
        input?: HTMLInputElement;
    } = {};
    render() {
        return (
            <input
                ref={(input) => this.ctrls.input = input}
                value={this.props.value}
                onChange={(e) => { this.props.onChange(this.ctrls.input.value) } }
                />
        );
    }
    componentDidMount() {
        this.ctrls.input.focus();
    }
}

把它们放在一个对象中

从React 16.3开始，添加refs的方法就是使用React。正如Jeff Bowen在回答中指出的那样，createRef。然而，你可以利用Typescript来更好地输入你的引用。

在你的例子中，你在input元素上使用了ref。所以我的做法是

class SomeComponent extends React.Component<IProps, IState> {
    private inputRef: React.RefObject<HTMLInputElement>;
    constructor() {
        ...
        this.inputRef = React.createRef();
    }

    ...

    render() {
        <input type="text" ref={this.inputRef} />;
    }
}

通过这样做，当你想使用那个ref时，你可以访问所有的输入法:

someMethod() {
    this.inputRef.current.focus(); // 'current' is input node, autocompletion, yay!
}

你也可以在自定义组件上使用它:

private componentRef: React.RefObject<React.Component<IProps>>;

然后，例如，获得道具:

this.componentRef.current.props; // 'props' satisfy IProps interface

编辑:这不再是在Typescript中使用refs的正确方式。看看杰夫·鲍恩的回答，给它点赞，以提高它的曝光度。

找到了问题的答案。在类中使用如下引用。

refs: {
    [key: string]: (Element);
    stepInput: (HTMLInputElement);
}

谢谢@basarat指出了正确的方向。

如果你使用的是React 16.3+，建议使用React. createref()创建引用。

class TestApp extends React.Component<AppProps, AppState> {
    private stepInput: React.RefObject<HTMLInputElement>;
    constructor(props) {
        super(props);
        this.stepInput = React.createRef();
    }
    render() {
        return <input type="text" ref={this.stepInput} />;
    }
}

当组件挂载时，ref属性的当前属性将被赋值给被引用的组件/DOM元素，并在卸载时赋值回null。例如，你可以使用this。stepput。current访问它。

有关RefObject的更多信息，请参见@apieceofbart的回答或PR createRef()。

如果你正在使用React的早期版本(<16.3)，或者需要更细粒度地控制何时设置和取消设置引用，你可以使用“回调引用”。

class TestApp extends React.Component<AppProps, AppState> {
    private stepInput: HTMLInputElement;
    constructor(props) {
        super(props);
        this.stepInput = null;
        this.setStepInputRef = element => {
            this.stepInput = element;
        };
    }
    render() {
        return <input type="text" ref={this.setStepInputRef} />
    }
}

当组件挂载时，React将使用DOM元素调用ref回调，并在卸载时使用null调用它。例如，你可以简单地使用this.stepInput访问它。

通过将ref回调定义为类上的绑定方法，而不是内联函数(与此答案的前一个版本一样)，可以避免在更新期间调用回调两次。

曾经有一个API，其中ref属性是一个字符串(参见Akshar Patel的答案)，但由于一些问题，字符串引用是强烈反对的，最终将被删除。

编辑于2018年5月22日，在React 16.3中添加了新的裁判方式。感谢@apieceofbart指出了一种新方法。