在某些情況下,我們假設您必須在基於 React 類別的元件中使用 React hook 概念。
但是如你所知,如果你想在基於類別的元件中直接使用它們,反應鉤子只能在功能元件中工作。
它將出現錯誤。
那麼如何做呢,有一個解決方案。
有3步驟解
建立自訂 Hook
import {useState} from 'react'; const useGreet = () => { const [text, setText] = useState(''); //... do any additional operation / hooks you want to add return text; }
建立高階組件
// import useGreet export const MyHigherOrderComponentDemo = (Component) => { return (props) => { const text = useGreet(); return <Component text={text} {...props}/>; } }
將高階組件包裝在基於類別的組件中
// import useGreet class MyClass extends React.component { render() { return ( <p>{this.props.text}</p> ) } } export default MyHigherOrderComponentDemo(MyClass);
以上是類別元件中的 React Hook的詳細內容。更多資訊請關注PHP中文網其他相關文章!