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道具，则会收到此类警告：

警告：打包：key不是道具。尝试访问它将导致返回undefined。如果您需要在子组件中访问相同的值，则应将其作为不同的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>
)

如何将属性传递给子组件？

1 个答案: