如何在功能组件中使用 react-typed 以及 refs？

Question

我正在尝试将此示例代码从https://github.com/ssbeefeater/react-typed 转换为功能组件而不是类组件。这就是我要转换的内容，但我不知道如何引用 typedRef 以及 start() 和 reset() 等方法。一些指导将不胜感激。

import React,{ Component } from 'react';
import { render } from 'react-dom';
import Typed from 'react-typed';

class MyComponent extends Component {
    render() {
        return (
                <div>
                    <Button onClick={this.typed.start()}>Start</Button>
                    <Button onClick={this.typed.stop()}>Stop</Button>
                    <Button onClick={this.typed.toggle()}>Toggle</Button>
                    <Button onClick={this.typed.destroy()}>Destroy</Button>
                    <Button onClick={this.typed.reset()}>Reset</Button>
                    <Typed
                    typedRef={(typed) => { this.typed = typed; }}
                    strings={['Here you can find anything']}
                    typeSpeed={40}
                    />
                </div>
        );
    }
}

render(
    <MyComponent/>,
    document.getElementById('app'),
);

Answer 1

你可以使用 Refs

import React, { useRef } from 'react';

把它放在你的函数中 const typed = useRef(null)

在你的 Typed 组件中 typedRef={typed}

像这样调用方法 <Button onClick={() => typed.start()}>Start</Button>