Question

如果我有一个纯粹的组件只需要一些道具并返回一些由styled-components 100％创建的组件组成的jsx，是否需要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 当然，当您使用react时，您需要JSX。

Here is a small example to demonstrate it。
我没有使用stack-snippet，因为它不支持文件结构。

As for the eslint，我猜这与当前版本的反应不是up to date。

当使用样式组件时，有必要`'从'react'中导入React？

1 个答案: