Wie funktioniert dieser Code mit reactJs

Question

Ich habe den folgenden Code:

import React from 'react' 
import Header from '../../components/Header' 

export const CoreLayout = ({ children }) => (
    <div>test</test> 
) 

CoreLayout.propTypes = { 

} 

export default CoreLayout 

Aber ich verstehe nicht, wie das ist Kommissionierung, dass reagieren ist. Ich bin es gewohnt, zu:

import React from 'react'; 
const Contacts = React.createClass({ 
    render() { 
    return (
     <div></div> 
    ); 
    } 
}); 
export default Contacts; 

oder

import React from 'react'; 
class Contacts extends React.Component { 
    constructor(props) { 
    super(props); 
    } 
    render() { 
    return (
     <div></div> 
    ); 
    } 
} 
export default Contacts; 

Wie kann ich Funktionen in der codierten ich oben zeigte? Wie Funktionen, um Logik in der Vorlage hinzuzufügen, solche Dinge.

Answer 1

export const CoreLayout = ({ children }) => (
    <div>test</test> 
) 

Hier wird CoreLayout ein Functional Stateless Komponente genannt.

In der React docs über Komponenten, das erste Beispiel, das Sie sehen, ist eine funktionale zustandslose Komponente.

• Sie sind reine Funktionen:

  const Welcome = (props, context) => { 
      return <h1>Hello, {props.name}</h1>; 
  } 
  

  Sie haben folgende Eigenschaften

  function Welcome(props, context) { 
      return <h1>Hello, {props.name}</h1>; 
  } 
  

  OR mit Pfeil Funktion:

  Stateless-Komponenten können wie folgt definiert werden. (Mit dem ersten Argument props und zweiten context)

• Nein Klasse benötigt
• Keine this Stichwort
• Keine Zustand und Lifecycle-Methoden.
• Einfach zu verstehen
• Vor allem sind sie einfach und elegant.

Answer 2

Sie haben ein paar Optionen, wenn Sie staatenlose Komponenten abbrechen möchten.

Die erste besteht darin, jedes Stück Logik in eine separate zustandslose Komponente zu zerlegen.

export const CoreLayout = ({ children }) => (
    <div> 
    <ConditionalHeader showing={true} /> 
    </div> 
) 

export const ConditionalHeader = ({ showing }) => (
    showing ? <Header /> : null 
) 

Alternativ können Sie Helferfunktionen in Ihrer Komponente definieren.