Question

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

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不存在的错误。但是，如果我将它们转换为类之外的函数，它们将起作用，并且所有内容都会呈现在我的页面上。我只想知道如何在课堂上达到同样的效果。如果可能的话。

Answer 1

几种实现方法，但是清洁工是将stateless函数分离到它们自己的文件中，并具有处理container和state的单个props将它们传递到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 （如果Hello和open为true，则仅返回value）

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

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

HelloContainer.js （包含state和methods以更新children节点）

 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} />
}

Answer 2

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

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

在类中使用功能组件

2 个答案: