Как это работает код с reactJs

Question

У меня есть следующий код:

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

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

CoreLayout.propTypes = { 

} 

export default CoreLayout 

Но я не понимаю, как это собирание, который реагирует. Я привык:

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

или

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

Как я могу добавить функции в кодированном я показал выше? Подобно функциям, чтобы добавить логику в шаблон, такие вещи.

Answer 1

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

Здесь CoreLayout называется Функциональная Stateless компонент.

В компоненте React docs о компонентах, первый пример, который вы видите, является функциональным компонентом без гражданства.

Апатриды компоненты могут быть определены следующим образом:

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

ИЛИ используя Arrow Функция

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

Они имеют следующие особенности:

• Они являются чистыми функциями. (С первым аргументом props и вторым context)
• класса не Необходимое
• Нет this Ключевого слова
• нет состояния и жизненного цикла методов.
• Легко понять
• Прежде всего, они просты и элегантны.

Answer 2

У вас есть несколько вариантов, если вы хотите сломать компоненты без гражданства.

Первый - разбить каждую часть логики на отдельный компонент без гражданства.

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

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

В качестве альтернативы вы можете определить функции помощников внутри вашего компонента.

export const CoreLayout = ({ children }) => { 
    const renderHeader =() => showing ? <Header /> : null 

    return (
    <div> 
     {renderHeader()} 
    </div> 
) 
}