Javascript 这段代码如何与reactJs一起工作

我有以下代码：

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

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

CoreLayout.propTypes = {

}

export default CoreLayout

从“React”导入React
从“../../components/Header”导入标题
导出常量CoreLayout=（{children}）=>(
测试
)
CoreLayout.propTypes={
}
导出默认CoreLayout

但我不明白这是怎么回事。我习惯于：

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

从“React”导入React；
const Contacts=React.createClass({
render（）{
返回(
);
}
});
导出默认联系人；

或

从“React”导入React；
类Contacts扩展React.Component{
建造师（道具）{
超级（道具）；
}
render（）{
返回(
);
}
}
导出默认联系人；

如何在上面显示的代码中添加函数？比如函数在模板中添加逻辑之类的东西

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

或者使用箭头函数

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

const欢迎=（道具、上下文）=>{
返回Hello，{props.name}；
}

它们具有以下特点：

• 它们是纯函数。（第一个参数为

  props

  ，第二个参数为

  context

  ）
• 不需要上课
• 没有关键字
• 没有状态和生命周期方法
• 易懂
• 最重要的是，它们简单而优雅

或者使用箭头函数

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

const欢迎=（道具、上下文）=>{
返回Hello，{props.name}；
}

它们具有以下特点：

• 它们是纯函数。（第一个参数为

  props

  ，第二个参数为

  context

  ）
• 不需要上课
• 没有关键字
• 没有状态和生命周期方法
• 易懂
• 最重要的是，它们简单而优雅

---

如果要分解无状态组件，您有几个选项

第一种方法是将每一段逻辑分解成一个单独的无状态组件

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

export const coreloayout=（{children}）=>(
)
export const ConditionalHeader=（{showing}）=>(
显示？：空
)

或者，您可以在组件内定义帮助器函数

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

export const coreloayout=（{children}）=>{
const renderHeader=（）=>显示？：null
返回(
{renderHeader（）}
)
}

如果要分解无状态组件，您有几个选项

第一种方法是将每一段逻辑分解成一个单独的无状态组件

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

export const coreloayout=（{children}）=>(
)
export const ConditionalHeader=（{showing}）=>(
显示？：空
)

或者，您可以在组件内定义帮助器函数

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

export const coreloayout=（{children}）=>{
const renderHeader=（）=>显示？：null
返回(
{renderHeader（）}
)
}

Hi free soul，感谢您的超详细解释。Hi free soul，感谢您的超详细解释。感谢Dan Prince的建议。我给了《自由灵魂》一个正确的答案，尽管你们都应该得到，因为你们都回答了我问题的两个不同部分，但他以前回答过。非常感谢你的建议，丹·普林斯。我给了《自由灵魂》一个正确的答案，尽管你们都应该得到，因为你们都回答了我问题的两个不同部分，但他以前回答过。无论如何，我非常感激。