내가 탐색 않습니다 어떻게 반응하는지에 대한 구성 요소와 유사한 반환하는 함수를 만들려면

Question

반응의 구성 요소를 반환하는 함수 만들기 : 내가 그들의 코드를 보았다하지만 여전히 약간 혼란 한

const AppNavigator = StackNavigator({ 
    Room: { screen: RoomContainer }, 
    Game: { 
     screen: GameContainer, 
     navigationOptions: { 
      gesturesEnabled: false 
     } 
    }, 
    Catalog: { screen: CatalogContainer } 
}, { 
     headerMode: 'none', 
     mode: 'modal' 
    }) 

Which you can then use like: 

<AppNavigator /> 

합니다. 이것은 나의 간단한 예이다. 다른 파일에

import onboardingCreator from 'this-package' 

export default class App extends Component { 
    render() { 
    let Onboard = onboardingCreator({ 
     test: 'cool' 
    }) 

    console.log("OB", Onboard) 


    return (
     <Onboard /> 
    ); 
    } 
} 

: 그리고

export default (props) => { 
    console.log("PROPS", props) 

    return <View style={{backgroundColor: 'green', flex: 1}} /> 
} 

어디서 잘못된 것입니까? 나는 생각하는 올바른 방향으로 날 잡으려고 간단한 예제가 필요해.

고마워.

Answer 1

문제는 함수가 구성 요소 클래스의 정의가 아닌 인스턴스 인 구성 요소를 반환한다는 것입니다. 인스턴스 (함수가 지금 작동하는 방식)를 렌더링 할 경우, 더 같을 것이다 : 다른 한편으로는, 당신이 그것을 새 구성 요소를 생성하고 반환하려는 경우에

import onboardingCreator from 'this-package' 

export default class App extends Component { 
    render() { 
    let onboard = onboardingCreator({ 
     test: 'cool' 
    }) 

    console.log("OB", onboard) 


    return <div>{onboard}</div>; 
    } 
} 

, 그것은 것 다음과 같이 보입니다.

export default (props) => { 
    console.log("PROPS", props) 

    class GeneratedComponent extends Component { 
     render() { 
      return <View 
       {...props} 
       style={{backgroundColor: 'green', flex: 1}} 
      />; 
     } 
    } 

    return GeneratedComponent; 
}