Как уменьшить повторение object.chain в реагирующем?

Question

У меня есть активный код с mobx, как показано ниже, как вы, ребята, видите, мне нужна ссылка this.props.store.user.avatar чтобы получить значение глубокого объекта из реквизита, я не хочу многократно использовать длинный синтаксис, я знаю, что могу позволить, чтобы это была переменная экземпляра в конструкторе для example2, но я обнаружил, что это пост-паттерн, это на самом деле происходит побочный эффект в моем эксперименте приводит к тому, что конструктор выполняется только один раз, когда компоненты начальные, поэтому я использую третий способ для example3, как вам нравится, я создаю функцию в компонентах и ​​возвращаю значение с помощью длинного синтаксиса, это то, что я могу сделать в моем лучше всего, но мне не нравится этот способ, он выглядит не элегантно, так что у кого-нибудь есть лучшее предложение или решение / способ?

Пример 1: мой вопрос

@observer
export default class Profile extends Component {
  constructor(props) {
    super(props);
  }

 render() {
    return(
        <BasicInfo 
          avatar = { this.props.store.user.avatar }
          displayName = { this.props.store.user.displayName  } 
          location = { this.props.store.user.location }
        />
        )
  }
}

Пример 2: Анти-паттерн

@observer
export default class Profile extends Component {
  constructor(props) {
    super(props);
    this.avatar = this.props.store.user.avatar
    this.displayName = this.props.store.user.displayName
    this.location = this.props.store.user.location
  }

 render() {
    return(
        <BasicInfo 
          avatar = { this.avatar }
          displayName = { this.displayName  } 
          location = { this.location }
        />
        )
  }
}

Пример 3: Анти-паттерн

@observer
export default class Profile extends Component {
  constructor(props) {
    super(props);
    this.state = {
      avatar: this.props.store.user.avatar,
      displayName: his.props.store.user.displayName,
      location: this.props.store.user.location,
    }
  }

 render() {
    return(
        <BasicInfo 
          avatar = { this.state.avatar }
          displayName = { this.state.displayName  } 
          location = { this.state.location }
        />
        )
  }
}

Пример 4: это работает, но существует ли лучший способ?

@observer
export default class Profile extends Component {
  constructor(props) {
    super(props);
  }

  avatar(){ return this.props.store.user.avatar}
  displayName(){ return this.props.store.user.displayName}
  location(){ return this.props.store.user.location}

 render() {
    return(
        <BasicInfo 
          avatar = { this.avatar() }
          displayName = { this.displayName()  } 
          location = { this.location() }
        />
        )
  }
}

Пример 5: Это хороший способ, но он не работает при обратном вызове

@observer
export default class Profile extends Component {
  constructor(props) {
    super(props);
  }

callback = () => {
  Actions.aboutMeEdit({ avatar: user.avatar })
  // there are not work
}


render() {
  const { user } = this.props.store;
  return(
    <BasicInfo 
      avatar = { user.avatar }
      displayName = { user.displayName  } 
      location = { user.location }
      callback = { this.callback }
    />
    )
  }
}

Answer 1

Используйте спред:

render() {
  const { user } = this.props.store;

  return (
    <ScrollView>
      <BasicInfo {...user} callback={this.callback.bind(this)} />
    </ScrollView>
  )
}

Answer 2

Вы можете сделать это так, чтобы уменьшить количество повторений:

render() {
const { user } = this.props.store;
return(
  <ScrollView>
    <BasicInfo 
      avatar = { user.avatar }
      displayName = { user.displayName  } 
      location = { user.location }
    />
    )
}