javascript - 无法在 react 中将 Prop 传递给子组件

Question

我仍在掌握 React，但我不明白为什么这不起作用，它应该传递来自 tabs 的 Prop 进入<Tab />并每次输出按钮。

如果我在 {this.props.content} 旁边不添加文字如果我输入 testText 它不会显示任何内容旁边{this.props.content}它将输出按钮 5 次但只显示 testText不是name它应该通过 content={item.name} 显示的字段 Prop

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

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

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