Question

正如标题所示，我希望能够在HoC中包装一个函数（包含）挂钩。

在下面的示例中，我希望能够用TestView元素标记将div的JSX包装在className="someClassName"处。但是我得到以下异常：

只能在函数组件的主体内部调用钩子。可能由于以下原因之一而发生： 1.您的React和渲染器版本可能不匹配（例如React DOM） 2.您可能违反了《钩子规则》 3.您可能在同一应用程序中拥有多个React副本。有关如何调试和调试的提示，请参见解决此问题

import React, { Component } from 'react'

function wrap(component) {
    let calledComponent = component()
    return (
        <div className="someClassName">
          {calledComponent}
        </div>
    );
  }


function TestView() {
    const [ val, setValue] = React.useState('Initial Value');
    return (
        <div>
            <input type="text" value={val} onChange={event=>setValue(event.target.value)}/>
        </div>
    )

 }

 export default wrap(TestView);

Answer 1

具体来说，高阶组件是一个使用组件并返回一个新组件。 react docs

因此，您必须具有一个返回组件的函数，也许像这样。

import React, { useState } from 'react';
import '../styles.css';

const withStyle = WrappedComponent => {
  return function WithStyle() {
    return (
      <div className='myClassStyle'>
        <WrappedComponent />
      </div>
    );
  };
};

function TestView() {
  const [val, setVal] = useState('Initial Value');
  return (
    <div>
      <input type='text' value={val} onChange={e => setVal(e.target.value)} />
    </div>
  );
}

export default withStyle(TestView);

如何使用HoC包装包含钩子的函数

1 个答案: