![](/img/trans.png)
[英]React functional component - how do I pass refs back to parent when component returns an array of elements?
[英]How can I use react-typed within a functional component along with refs?
我正在尝试将此示例代码从https://github.com/ssbeefeater/react-typed转换为功能组件而不是 class 组件。 这就是我要转换的内容,但我不知道如何引用 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'),
);
您可以使用参考
import React, { useRef } from 'react';
把它放在你的 function const typed = useRef(null)
在你的 Typed 组件里面typedRef={typed}
调用像这样的方法<Button onClick={() => typed.start()}>Start</Button>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.