Javascript 无法将道具传递给react中的子组件

我仍在努力应对react，但我不明白为什么它不起作用，它应该将道具从

选项卡

传递到

并每次输出按钮

如果我在

{this.props.content}

旁边没有文本，它不会显示任何内容，如果我在

{this.props.content}

旁边放置

testText

，它将输出按钮5次，但只显示

testText

而不是通过

content={item.name}

属性显示的

字段

class TopCategories extends React.Component {

render() {
const Tab = () => (
  <TestBtn key={this.props.key} >
   testText {this.props.content}
  </TestBtn>
)

const items = [
  { id: 1, name: 'tab-1', text: 'text' },
  { id: 2, name: 'tab-2', text: 'text' },
  { id: 3, name: 'tab-3', text: 'text' },
  { id: 4, name: 'tab-4', text: 'text' },
  { id: 5, name: 'tab-5', text: 'text' },
]

const tabs = items.map(item =>
  <Tab key={item.id} content={item.name} />,
)

return (
  <Container>
    <Wrapper>
      {tabs}
    </Wrapper>
  </Container>
  )
 }
}


 export default TopCategories

类TopCategories扩展了React.Component{
render（）{
常量选项卡=（）=>(
testText{this.props.content}
)
常数项=[
{id:1，名称：'tab-1'，文本：'text'}，
{id:2，名称：'tab-2'，文本：'text'}，
{id:3，名称：'tab-3'，文本：'text'}，
{id:4，名称：'tab-4'，文本：'text'}，
{id:5，名称：'tab-5'，文本：'text'}，
]
const tabs=items.map（item=>
,
)
返回(
{tabs}
)
}
}
导出默认TopCategories
您需要将道具传递给无状态函数，因为它是一个无状态组件，所以不可用。应该是这样的：

const Tab = (props) => {
   return (
       <TestBtn key={props.key} >
           testText {props.content}
       </TestBtn>
   );
 }

const选项卡=（道具）=>{
返回(
testText{props.content}
);
}
您需要将道具传递给无状态函数，因为它是一个无状态组件，所以不可用。应该是这样的：

const Tab = (props) => {
   return (
       <TestBtn key={props.key} >
           testText {props.content}
       </TestBtn>
   );
 }

const选项卡=（道具）=>{
返回(
testText{props.content}
);
}
您在
选项卡中没有
这个
，因为它是一个无状态函数<代码>道具
作为参数传递：
常量选项卡=（道具）=>/*…*/
我也尝试过，但是我的linter（airbnb）使用该语法时引发错误-单个函数参数周围出现意外的括号，其主体没有花括号您在
选项卡中没有
this
，因为它是无状态函数<代码>道具
作为参数传递：
常量选项卡=（道具）=>/*…*/
我也尝试过，但是我的linter（airbnb）在使用该语法时引发错误-在没有大括号的单函数参数周围出现意外的括号例如Hanks但是这在airbnb linter中引发了一个错误，我不知道如何绕过
在没有大括号的单函数参数周围出现意外的括号编辑了我的答案，我以前没有使用过airbnb linter，希望linter很高兴这个样式替代方案能够删除
const Tab=（props）=>
周围的（）它还使用花括号“箭头体周围的意外块语句”抛出错误，然而，正如rlemon所建议的，如果道具周围的括号被删除，它就会起作用。非常感谢您的回答！感谢您的示例，但是这在airbnb linter中引发了一个错误，我不知道如何绕过
单个函数参数的意外括号，该参数的主体没有花括号
我编辑了我的答案，我以前没有使用过airbnb linter，希望linter很高兴这个样式的替代方法是删除
const Tab=（props）=>
周围的（）它还抛出了一个错误，使用了大括号“箭头体周围的意外块语句”，但是正如rlemon所建议的，如果删除了props周围的括号，它就会起作用。非常感谢您的回答！