Question

我尝试了所有可能的方法来获取文件MembershipCard.js上的简单参数。我的Home组件Home.js只是将道具传递到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-此文件是我的表示层的一部分。它只会返回Card设计。

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>
)

Answer 1

对您的代码进行以下更改，它应该可以工作。更改道具。道具似乎是传递道具的错误方法。使用传播算子将所有道具正确地传递给孩子。

<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}/>

Answer 2

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

与其将其称为组件-

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

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

{ MembershipCard (membership, sideLine) }

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

无法接收道具来转储组件

2 个答案: