如何减少反应原生的重复object.chain？

Question

我有反应本机代码和mobx一样，如你所知，我需要引用this.props.store.user.avatar来获取道具的深层对象值，我不想反复使用长语法，我知道我可以让它成为example2的构造函数中的实例变量，但我发现posts是反模式，它实际上是由我的实验发生的一些副作用导致构造函数只在组件初始化时执行一次，所以我使用对于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 
      avatar = { user.avatar }
      displayName = { user.displayName  } 
      location = { user.location }
    />
    )
}

Answer 2

使用传播：

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

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