繁体   English   中英

在类中使用功能组件

Using a functional component within a class

提示:本站收集StackOverFlow近2千万问答,支持中英文搜索,鼠标放在语句上弹窗显示对应的参考中文或英文, 本站还提供   中文繁体   英文版本   中英对照 版本,有任何建议请联系yoyou2525@163.com。

我想知道如何在类中创建无状态组件。 就像我在类之外使用这些函数一样,页面也会呈现,但是当我将它们放在类中时才呈现。 我的页面无法呈现。 我希望他们进入课堂,所以我可以向他们应用一些课堂道具。

class helloClass extends React.Component {
  state = {
  };
  Hello =({ items}) => {
    return (
      <ul>
        {items.map((item, ind) => (
          <RenderHello
            value={item.name}    
          />
        ))}
      </ul>
    );
  }

  RenderHello = ({ value }) => {
    return (
      <div>
        {open && value && (
          <Hello
            value={value}  
          />
        )}
      </div>
    );
  }
  render() {

  }
}

export default (helloClass);

我有这样的设置。 但实际上不是这样。 而且,我不断收到Hello和RenderHello不存在的错误。 但是,如果我将它们转换为类之外的函数,它们将起作用,并且所有内容都会呈现在我的页面上。 我只想知道如何在课堂上达到同样的效果。 如果可能的话。

2 个回复

做到这一点的几种方法,但清洁者是将stateless函数分离到它们自己的文件中,并有一个单独的container来处理stateprops并将它们传递给children

Hello.js (显示li项目)

import React from 'react';

export default ({ items }) => (
  <ul>
    {items.map((item, ind) => (
      <li key={ind}>
         {item.name}
      </li>
    ))}
  </ul>
);

RenderHello.js (仅当openvalue为true时才返回Hello

 import React from 'react';
 import Hello from './Hello';

 export default ({ open, value, items }) => (
   open && value
     ? <Hello items={items} />
     : null
 );

HelloContainer.js (包含更新children节点的statemethods

 import React, { Component } from 'react';
 import RenderHello from './RenderHello';

 class HelloContainer extends Component {
   state = {
     items: [...],
     open: false,
     value: ''
   };

   ...methods that update the state defined above (ideally, these would be passed down and triggered by the child component defined below)

   render = () => <RenderHello {...this.state} />
}

这很奇怪,因为您有一个递归调用,最终将以无限循环结束,但是从语法上讲,它将是这样的:

class helloClass extends React.Component {
    state = {
    };
Hello(items) {
    return (
      <ul>
        {items.map((item, ind) => (
          {this.RenderHello(item.name)}

        ))}
      </ul>
    );

  }

 RenderHello(value) {
     return (
       <div>

         {open && value && (
           {this.Hello(value)}
         )}
       </div>
     );
   }
   render() 

   {

   }
 }

 export default (helloClass);
1 类/功能组件,其中的方法

我对 ReactJs 很陌生,我试图了解更多细节。 在 Class 组件中,我知道有两种方法可以声明处理程序方法来更改状态 在功能组件中,我可以通过以下两种方式做到这一点 我有几个问题 1) React 如何知道 classChangeState2 是一个没有“函数”的方法? 2)我知 ...

3 功能组件到类组件

嗨,我想在我的项目中使用对话框......但是我得到了带有功能组件的对话框......任何人都可以将其转换为基于类的组件并请给我答案......此代码已从材料中提取ui....我对功能组件不太熟悉...任何人都可以帮助解决这些问题...请 ...

2020-05-18 06:54:46 1 167   reactjs
6 使用钩子将类组件(Navbar)转换为功能

我正在转换在Material UI文档页面上找到的React + Material UI + Firebase项目。 我正在尝试打开“注册对话框”(即“注册模式”)。 这是4个相应文件的简化版本,我需要帮助打开注册模式。 App.js Navbar.js DialogH ...

9 功能组件中的 useCallback

我在一个功能组件中定义了一个 useCallback 函数,它在同一个功能组件中的 useEffect 中使用。 在这种情况下,功能是否优化? import { useCallback, useEffect, useState } from 'react'; import { useDispatch ...

2020-11-12 10:04:56 1 50   reactjs
暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2021 STACKOOM.COM