如何将属性传入childcomponent？

Question

我有一个容器，它将名为 'key' 的属性传递给子组件：

import React, {PropTypes} from 'react'
import {connect} from 'react-redux'
import Pack from '../components/Pack/Pack'

const PacksContainer = ({Packs, addToCart}) => (
    <div>
        {Packs.map(pack =>
            <Pack key={pack.id}/>
        )}
    </div>
)

const mapStateToProps = state => ({
    Packs: [{id:1},{id:2}]
})

export default connect(
    mapStateToProps
)(PacksContainer)

子组件包如下所示：

import React, { PropTypes } from 'react'

const Pack = ({key}) => (
    <div>
        {key}
    </div>
)

export default Pack

我期待显示 ID，但什么也没有？如何显示来自父级的 ID？

Answer 1

如果您尝试访问 key 道具，您将收到这样的警告：

Warning: Pack: key is not a prop. Trying to access it will result in undefined being returned. If you need to access the same value within the child component, you should pass it as a different prop

key 是在创建组件之前由 React 内部控制的东西。考虑到人们可能会意外地重载它或将它用于不相关的事情，它永远不会成为传递给组件的属性之一。

一个好的做法被认为是将标识符作为另一个道具传递，即使它看起来多余。

const PacksContainer = ({Packs, addToCart}) => (
<div>
    {Packs.map(pack =>
        <Pack id={pack.id} key={pack.id}/>
    )}
</div>

)

const Pack = ({id}) => (
  <div>
    {id}
  </div>
)

如何将属性传入childcomponent？

How to pass in property into childcomponent?

reactjs

react-redux