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

Question

我有以下代码:

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

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

CoreLayout.propTypes = {

}

export default CoreLayout

但我不明白这是如何使用react的。我已经习惯了:

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被称为功能无状态组件。

在 React docs关于组件，您看到的第一个示例是功能无状态组件。

无状态组件可以这样定义:

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

或使用箭头函数

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

它们具有以下特点:

• 它们是纯函数。 (带有第一个参数 props 和第二个 context)
• 无需上课
• 否 this关键字
• 没有状态和生命周期方法。
• 易于理解
• 最重要的是，它们简单而优雅。