Reactjs 如何将一个类的函数添加到组件中的另一个函数中？

如何将SayHello类的RenderFunction添加到RenderView函数中

为清晰起见，请查看以下图片和代码

这是我的代码：

import React from 'react';

class SayHello{
  RenderFunction() {
    return (
      <p>Hello</p>
    );
  }
}


function RenderView(){
  return (
    <div>
      //I want to add RenderFunction of class of SayHello into here.
    </div>
  );
}


const DishDetail = () => {
  return(
    <div>
      <RenderView />
    </div
  );
}

export default DishDetail;

从“React”导入React；
同学们打招呼{
RenderFunction（）{
返回(
你好

);
}
}
函数RenderView（）{
返回(
//我想在这里添加SayHello类的RenderFunction。
);
}
const dishdestail=（）=>{
返回(
你试过这样吗

class SayHello{
    RenderFunction = () => {
         return (
           <p>Hello</P>
         );
    }
}

function RenderView(){
  return SayHello.RenderFunction();
}

class-SayHello{
RenderFunction=（）=>{
返回(
你好

);
}
}
函数RenderView（）{
返回SayHello.RenderFunction（）；
}
如果
RenderFunction
不依赖于
SayHello
实例，那么它不应该是此类的一部分

它看起来像无状态函数组件，可以这样使用，因为在React中合成通常是这样实现的：

function RenderFunction() {
     return (
       <p>Hello</P>
     );
}

class SayHello{
  // can use <RenderFunction> too if necessary
}


function RenderView(){
    return <RenderFunction/>
}

然后，可以在父组件中以
this.modalContainerRef.current.toggleModal（）
的形式访问模式。可以通过道具或上下文API将允许调用
toggleModal
的回调传递给子组件

从
组件扩展您的类

将
RenderFunction
移动到
render
as arrow函数中

将
放入
渲染视图的方法中

查看下面的正确代码：

import React, { Component } from 'react';

export class SayHello extends Component {

    render(){

        RenderFunction = ()=> {
         return (
           <p>Hello</p>
         );
        }

        return(
           {RenderFunction()}
        );
    }

}


function RenderView(){
     return (
         <div>
             <SayHello  />
         </div>
    );
}


const DishDetail = ()=>{
     return(
         <div>
             <RenderView />
         </div
     );
}

export default DishDetail;

import React，{Component}来自'React'；
导出类SayHello扩展组件{
render（）{
RenderFunction=（）=>{
返回(
你好

);
}
返回(
{RenderFunction（）}
);
}
}
函数RenderView（）{
返回(
);
}
const dishdestail=（）=>{
返回(
如果我理解您提出的问题，我相信以下是您正在寻找的。可以看到以下内容在这里起作用：

首先，我们将要扩展我们的react组件，我们可以通过两种方式来实现，我们可以从react导入中进行如下分解

import React, { Component } from 'react';

或者我们可以直接写出来：

class SayHello extends React.Component

其次，我们需要调用我们的
SayHello
组件，就像调用我们想要使用的任何其他组件一样

同样在我们使用箭头函数时，我对
RenderView
组件使用了这种方法

根据上述内容，我们有以下几点：

class SayHello extends Component {
  render() {
    return <p>Hello</p>;
  }
}

const RenderView = () => {
  return (
    <div>
      <SayHello />
    </div>
  );
};

const DishDetail = () => {
  return (
    <div>
      <RenderView />
    </div>
  );
};

类SayHello扩展组件{
render（）{
return你好
；
}
}
const RenderView=（）=>{
返回(
);
};
const dishdestail=（）=>{
返回(
);
};

希望以上内容能够帮助并回答您的问题。我也整理了您的代码。例如，您的原始代码在
div
上缺少一个结尾
。这显然无法使其编译/帮助。
感谢您给我的答案。但它不起作用。错误是什么？请显示您的完整代码，因为我不知道“我不明白为什么需要
SayHello
classwell只显示必要的内容，为什么需要
SayHello
类？但我的问题与我在问题中输入的代码完全相同。这也不起作用，因为在不实例化SayHello的情况下无法访问RenderFunction实例属性。但我想为它所属的类添加一个模式。”需要定义构造函数。我怎么做？我明白了。这实际上是一个不同的问题，我将尝试解释它。SayHello看起来像一个组件，但仍然不是一个有效的组件（不是从组件继承的）没有
render
。
RenderFunction
实际上应该是
render
？你只需要一个实例就可以存在吗？你能在问题中澄清这一点吗？
RenderFunction
将被呈现，我只需要一个
实例就可以存在了。我已经再次编辑了
RenderView
函数清晰。然后你需要用另一种方式来做。你不能从访问RenderFunction中获益。我更新了答案。我相信这个答案涵盖了你的情况。
class SayHello extends React.Component

class SayHello extends Component {
  render() {
    return <p>Hello</p>;
  }
}

const RenderView = () => {
  return (
    <div>
      <SayHello />
    </div>
  );
};

const DishDetail = () => {
  return (
    <div>
      <RenderView />
    </div>
  );
};