无法接收转储组件的道具答案

【问题标题】：Unable to receive props to dump component无法接收转储组件的道具
【发布时间】：2018-09-25 05:13:58
【问题描述】：

我尝试了所有可能的方法来获取文件MembershipCard.js 上的简单参数。我的 Home 组件 Home.js 只是将 props 传递给 MembershipList.js ，在那里我完成了次要的 Array 操作并对其进行迭代以准备一个列表。然后将列表中的每个项目传递到第三个文件MembershipCard.js。我在这个文件中得到了membership 对象，并且能够在主页上准备一个卡片列表。在主页上，我必须显示一条边线，而我不希望在其他页面（也正在访问MembershipCard.js）上显示这条边线，因此我正在尝试发送一个变量，我将有条件地在该变量上显示边线。

但经过这么多尝试后，我仍然收到undefined

这是我的 React 组件 - Home.js

  render () {

    return (

      <Surface>

        <GreetingCard profile={this.props.profile.Profile}/>

        <MembershipList props={this.props}/>

      </Surface>

      )
  }

MembershipList.js - 仅包含几个函数

renderMembershipCard = (membership, i, props, sideLine = true) => {
    return (
        <TouchableOpacity key={i} style={styles.membership} onPress={() => props.navigation.navigate('Item', { title: membership.gym_name })}>
            {/* <MembershipCard {...{membership, sideLine }}/> */}
            <MembershipCard {...membership} sideLine={sideLine}/>
        </TouchableOpacity>
    )
}

const MembershipList = (props) => {
    let membership = props.props.profile.Membership
    let listArray = [];
    Object.keys(membership).forEach(key => listArray.push(this.renderMembershipCard(membership[key], key, props.props)));
    return (        
        <View>
            <Text style={styles.ListTitle}>Active Membership ({listArray.length})</Text> 
            {listArray}
        </View>
    );
}

MembershipCard.js - 这个文件是我的表示层的一部分。它只返回一个卡片设计。

const MembershipCard = ({membership,sideLine}) => {
console.log('sideLine', sideLine);  // showing undefined
console.log('membership', membership);
return (
        
    <Card>
      <Text style={styles.gymTitleText}>{membership.name}</Text>
      ... JSX code
    </Card>
)

【问题讨论】：

标签： react-native jsx

【解决方案1】：

对您的代码进行以下更改，它应该可以工作。更改 props.props 似乎是传递道具的不正确方式。使用扩展运算符以正确的方式将所有道具传递给孩子。

<MembershipList {...this.props}/>

const MembershipList = (props) => {
let membership = props.profile.Membership
let listArray = [];
Object.keys(membership).forEach(key => listArray.push(this.renderMembershipCard(membership[key], key, props)));
return (        
    <View>
        <Text style={styles.ListTitle}>Active Membership ({listArray.length})</Text> 
        {listArray}
    </View>
)}

<MembershipCard membership={membership} sideLine={sideLine}/>

【讨论】：

嗨 Shubham，问题不在于 MembershipList.js。这工作正常，我可以在主页上呈现列表。问题出在 MembershipCard.js 我没有得到“sideLine”的地方。而 sideLine 只是布尔值。

【解决方案2】：

我用简单的技巧解决了它。

而不是将其称为组件 -

<MembershipCard {...membership} sideLine={sideLine}/>

使用花括号 {} 将其作为简单的 JS 函数调用 -

{ MembershipCard (membership, sideLine) }

这样我可以轻松地传递尽可能多的参数，并且可以轻松地访问被调用函数中的所有参数。

【讨论】：