转动
<h2>
和
<button>
将其转换为自己的组件。看起来唯一更改的值是标题文本,它也是
value
对于按钮,它也是传递给的文本
.speak
单击。文本不需要状态,因为文本不会更改。
所以,把演讲对象和文本作为道具传递下去。
你也不应该打电话
new Speech
每次组件渲染时。改为只创建一次,使用ref或state。
const Word = ({ text, speech }) => (
<>
<h2>{text}</h2>
<button
value={text}
onClick={() => speech.speak({ text })}
alt="click here for pronounciation"
className="buttonSound"
>
ð
</button>
</>
);
function Alphabet() {
const [speech] = useState(() => new Speech());
useEffect(() => {
speech
.init({
lang: "en-US",
rate: 0.4,
})
.then((data) => {
console.log("Speech is ready, voices are available", data);
})
.catch((e) => {
console.error("An error occured while initializing : ", e);
});
}, []);
return (
<>
<Word text="Apple" speech={speech} />
<Word text="Banana" speech={speech} />
<Word text="Carrot" speech={speech} />
</>
);
}