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

在React docs about components中，您看到的第一个示例是Functional无状态组件。

可以像这样定义无状态组件：

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

使用箭头功能

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

这段代码如何与reactJs一起使用

2 个答案: