时间戳

首页 > 解决方案 > 如何将一个类的功能添加到组件中的另一个功能中？

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;

标签： reactjs

解决方案

如果我理解您所问的问题，我相信以下是您正在寻找的内容。可以在这里看到以下内容：https ://codesandbox.io/s/7ykk0z90yx

首先，我们将扩展我们的反应组件，我们可以通过两种方式做到这一点，我们可以从反应导入中解构，如下所示。

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>
  );
};

希望以上内容对您有所帮助并回答您的问题。我也整理了你的代码。例如，您的原始代码缺少>它的结尾div。这显然不会使它编译/帮助。

推荐阅读