Невозможно получить реквизит для дампа компонента

Question

Я перепробовал все возможные способы получить простой параметр в файле MembershipCard.js.Мой домашний компонент Home.js просто передает реквизиты в MembershipList.js, где я выполнил второстепенные операции с массивами, и повторяет их, чтобы подготовить список.Каждый элемент из списка затем передается в третий файл 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>
)

Answer 1

Я решил это с помощью простого трика.

Вместо вызова его как компонента -

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

вызовите его как простую функцию JS с использованием фигурных скобок {} -

{ MembershipCard (membership, sideLine) }

Таким образом, я могу легко передать столько параметров и легко получить доступ ко всем в вызываемой функции.

Answer 2

Внесите следующие изменения в свой код, и он должен работать.Смена 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}/>