javascript - 使用 styled-components 时需要 `import React from ' react'`？

Question

如果我有一个纯组件，它只接受一些 Prop 并返回一些 jsx，它由 100% 使用 styled-components 创建的组件组成，是否有必要 import React from ' react '?

我收到一个 eslint 错误:react/react-in-jsx-scope 因为目前我没有导入 React from 'react'，但我的代码仍然可以正常工作。这个原因让我质疑我是否应该在这里导入 React。

这是我的纯组件文件的一个非常基本的示例:

import styled from 'styled-components'

// pure function
const Block = props => {
  return (
    <BlockOuter>
      <BlockInner>{props.children}</BlockInner>
    </BlockOuter>
  )
}

// styled component
const BlockOuter = styled.div`
  display: flex;
  flex-direction: column;
  border: 1px solid #f2f2f2;
  height: ${props => props.height || 400}px;
  width: ${props => props.width}px;
`

// styled component
const BlockInner = styled.div`
  overflow: auto;
`

Answer 1

自 React V16 you can return a string from your components .
所以在某些情况下，返回字符串的无状态组件将与任何其他组件一样:

export const Hello = ({ name }) => `${name}`;

这里不需要react。
当然，当您使用 JSX 时，您将需要 react。

Here is a small example to demonstrate it .
我没有使用堆栈代码段，因为它不支持文件结构。

As for the eslint ，我想这不是 up to date使用当前版本的 React。