react-native에서 repeat object.chain을 줄이는 방법은 무엇입니까?

Question

나는 아래처럼 mobx와 반응하는 네이티브 코드를 가지고있다. 너희들도 알다시피, 참조 객체가 필요하다면, 참조 객체를 얻으려면 this.props.store.user.avatar이 필요하다. 나는 긴 구문을 반복적으로 사용하고 싶지 않다. 변수를 example2에 대한 생성자에서 찾을 수 있지만, 그 반대로 패턴을 posts에 의해 발견, 실제로 내 실험에 의해 일부 부작용이 발생합니다 생성자가 한 번만 구성 요소를 실행하면 예를 들어, 그래서 내가 example3에 대한 제 3의 방법을 사용하여 원하는대로 , 구성 요소에서 함수를 만들고 긴 구문으로 값을 반환합니다. 최선을 다해서 수행 할 수 있지만이 방법이 좋지 않습니다. 우아하지 않으므로 누구나 더 나은 제안이나 솔루션/방법이 있습니까?

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