在类中使用功能组件

Question

I'm wondering how I can create a stateless component within a class. Like if I use these functions outside the class, my page renders, but when I put them in the class. My page doesn't render. I want them to be inside the class so I can apply some class props to them.

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

I have a setup like this. But not actually like this. And I keep getting the error that Hello and RenderHello do not exist. However, if I turn these into functions outside of the class, they work and everything renders on my page. I just want to know how I can achieve the same but within a class. If that's even possible.

Answer 1

Several ways of doing it, but the cleanist is to separate the stateless functions into it's their own files and have a single container that handles state and props and passes them down to the children :

Hello.js (displays the li items)

import React from 'react';

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

RenderHello.js (only returns Hello if open and value are true)

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

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

HelloContainer.js (contains state and methods to update the children nodes)

 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

Its strange because you have a recursive call that will end up in a infinite loop, but syntactically, it would be something like that:

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