无法在道具中将道具传递给子组件

Question

我仍在与react保持联系，但我不明白为什么它不起作用，它应该将tabs的props传递给<Tab />并每次输出按钮。

如果我在{this.props.content}旁边没有放置任何文本，则不会显示任何内容，如果我在{this.props.content}旁边放置testText ，则会输出5次按钮，但只显示testText而不显示name字段应该通过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

Answer 1

您需要将prop传递给无状态函数，并且由于它是无状态组件，因此不可用。 应该是这样的：

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