小编Dis*_*pix的帖子

我使用react带styled-components,并jest enzyme为我的测试.我正在测试由于themefrom 而导致错误的主题组件的麻烦styled-components.

我的组件是:

const Wrapper = styled.header`
  position: fixed;
  top: 0;
  left: 0;

  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;

  width: 100%;
  height: 64px;

  background-color: ${({ theme }) => theme.colors.main.default};
  color: ${({ theme }) => theme.colors.main.text};
`

我的测试是:

it('should render a <header> tag', () => {
  const renderedComponent = shallow(<Wrapper />)
  expect(renderedComponent.type()).toEqual('header')
})

Jest给了我这个错误:

<Wrapper /> › should render a <header> tag

    TypeError: Cannot read property 'main' of …

我忍不住想知道在React函数组件中使用普通函数和粗箭头之间是否有任何优势

const MyMainComponent = () => (
  <main>
    <h1>Welcome to my app</h1>
  </main>
)

function MyMainComponent() {
  return (
    <main>
      <h1>Welcome to my app</h1>
    </main>
  )
}

两种工作当然都很好，但是有推荐的写法吗？有任何论点支持另一方吗？

编辑：我知道普通javascript函数（即上下文，堆栈跟踪，return关键字等）的差异可能会影响您对函数的使用方式。但是我纯粹是在React组件方面问这个问题。