0

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

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

钩子只能在函数组件的主体内部调用。这可能是由于以下原因之一： 1. 你可能有不匹配的 React 版本和渲染器（例如 React DOM） 2. 你可能违反了 Hooks 规则 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);
4

1 回答 1

1

具体来说，高阶组件是一个接受一个组件并返回一个新组件的函数。 反应文档

所以，你必须有一个返回组件的函数，也许像这样。

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);
于 2020-02-06T02:17:52.993 回答