如何创建一个新的 React 组件返回 null 但仍然访问钩子答案

【问题标题】：How to create a new React component with null return but still access hooks如何创建一个新的 React 组件返回 null 但仍然访问钩子
【发布时间】：2020-03-10 15:56:02
【问题描述】：

是否可以在代码中创建一个新组件，而不是在 dom 中放置一个 react 组件，就像创建一个新的 javascript 对象一样？

import * as React from "react";
import Nodetest from "./nodetest";

export default function App() {
  const makeNewNode = () => {
    const NewNode = new Nodetest();
    NewNode.makelog();
  };

  return <button onClick={makeNewNode}>Make New node</button>;
}

Nodetest 返回 null 但不允许我调用 useContext 挂钩。

import { Component, useContext } from "react";
import { Dispatch, DRAW } from "./global";

class Nodetest extends Component {
  test: string;
  dispatch: any;

  constructor() {
    super();
    this.test = "hello";
    this.dispatch = useContext(Dispatch);
  }

  makelog = () => {
    this.dispatch({ type: DRAW, value: Date.now() });
    console.log("new log");
  };

  render() {
    return null;
  }
}

export { Nodetest };

更新

我在这里创建了一个沙盒https://codesandbox.io/s/eager-wiles-0h2uz 但super() 给出了错误index.d.ts(449, 21): An argument for 'props' was not provided. 并单击按钮导致Invalid hook call. Hooks can only be called inside of the body of a function component

【问题讨论】：

您的问题是什么？ Nodetest 只是一个函数，为什么你这里有new？我认为您打算将其设为一个类，这样您就可以在其上公开方法
我希望 nodeTest 类似于 javascript 类，但仍然能够使用上下文挂钩
为什么不直接使用自定义挂钩？
不，这是不可能的，你不能在未“渲染”的组件中使用钩子，这意味着从 jsx 转换为它们的原生形式 React.createElement(Nodetest ...
这似乎是一个 XY 问题。

标签： reactjs

【解决方案1】：

更新

如果你真的想使用类，你可以在类构造函数中注入dispatch。

不是 100% 确定这是否可行，但您可以尝试！

// Nodetest.ts
export default class Nodetest {
  test: string;
  dispatch: any;

  constructor(dispatch) {
    this.test = "hello";
    this.dispatch = dispatch;
  }

  makelog = () => {
    this.dispatch({ type: DRAW, value: Date.now() });
    console.log("new log");
  };
}

import * as React from "react";
import { Dispatch, DRAW } from "./global";
import Nodetest from "./Nodetest";

export default function App() {
  const dispatch = React.useContext(Dispatch);

  const makeNewNode = () => {
    const NewNode = new Nodetest(dispatch);
    NewNode.makelog();
  };

  return <button onClick={makeNewNode}>Make New node</button>;
}

旧

您只能将 React 钩子与功能组件一起使用。从你给出的最好的例子中，你可以做的是：

import * as React from "react";
import { Dispatch, DRAW } from "./global";

export default function App() {
  const dispatch = React.useContext(Dispatch);

  cosnt makelog = () => {
    dispatch({ type: DRAW, value: Date.now() });
    console.log("new log");
  };

  const makeNewNode = () => {
    makelog();
  };

  return <button onClick={makeNewNode}>Make New node</button>;
}

【讨论】：

所以我不能像使用类组件一样创建许多新对象，然后让每个新类组件都可以访问上下文，这很糟糕
如果我注销 this.dispatch，当我尝试运行它时会收到 Object {dispatch: function bound dispatchAction()} dispatch: function bound dispatchAction() {} <constructor>: "Function" name: "Function"，我会收到 TypeError _this.dispatch is not a function 检查沙箱