Question

正如标题中所述，我似乎无法使用钩子

我知道有些人会尝试告诉我这是重复的，但是在我没有看到的所有问题中，没有一个人似乎在问什么使用导入的功能组件的正确方法 我尝试渲染的组件。

    import React from 'react';
import { hot } from 'react-hot-loader';
import Playground from '../playground/index';

class App extends React.Component {
  render() {
    Playground();
    return (
      <div>
        <p>Hello World</p>
      </div>
    );
  }
}

export default hot(module)(App);

我的开发依赖项：

之所以将它们包括在内，是因为我在其他答案中也看到了其他人声称是由于版本（我已经更新了所有明智的回答）

"devDependencies": {
    "sass-loader": "7.1.0",
    "sass": "*",
    "@babel/cli": "7.1.5",
    "@babel/core": "7.1.5",
    "@babel/plugin-proposal-class-properties": "7.1.0",
    "@babel/plugin-syntax-dynamic-import": "7.0.0",
    "@babel/preset-env": "7.1.5",
    "@babel/preset-react": "7.0.0",
    "babel-core": "7.0.0-bridge.0",
    "babel-eslint": "10.0.1",
    "babel-jest": "23.6.0",
    "babel-loader": "8.0.4",
    "babel-plugin-dynamic-import-node": "2.2.0",
    "css-loader": "1.0.1",
    "eslint": "5.12.0",
    "eslint-plugin-jsx-a11y": "6.1.2",
    "eslint-plugin-react": "7.12.3",
    "html-webpack-plugin": "3.2.0",
    "husky": "1.3.1",
    "jest": "23.6.0",
    "jest-dom": "2.1.1",
    "node-sass": "4.11.0",
    "node-sass-chokidar": "1.3.4",
    "prettier": "1.15.2",
    "pretty-quick": "1.8.0",
    "react-axe": "3.0.2",
    "react-testing-library": "5.2.3",
    "style-loader": "0.23.1",
    "webpack": "4.25.1",
    "webpack-bundle-analyzer": "3.0.3",
    "webpack-cli": "3.1.2",
    "webpack-dev-server": "3.1.10",
    "webpack-merge": "4.1.4"
  }

还有我尝试导入的功能组件：

import React, { useState } from 'react';

export default function Playground() {
  const [text, setText] = useState('');
  const [checked, setCheck] = useState(false);

  return (
    <section>
      <input type="text" value={text} onChange={e => setText(e.target.value)} />
      <input
        type="checkbox"
        value={checked}
        onChange={e => setCheck(e.target.value)}
      />
      <ul>
        <li>{text}</li>
        <li>{checked.toString()}</li>
      </ul>
    </section>
  );
}

Answer 1

使用功能组件的正确方法与使用类组件的正确方法没有什么不同。您不应该尝试调用您的组件函数-就像您没有创建类的实例一样-只需在JSX中使用它即可。

通过调用组件函数，您实际上将其视为返回React元素的自定义钩子（自定义钩子只是使用React的内置钩子，例如useState的函数）。这导致React抱怨，因为您正在从类组件的render方法而不是从功能组件的主体调用自定义钩子。

以下是使用Playground组件的一种可能方法：

import React from 'react';
import Playground from '../playground/index';

class App extends React.Component {
  render() {
    return (
      <Playground/>
    );
  }
}

未捕获的不变违反：只能在函数组件的主体内部调用挂钩

1 个答案: