오류 반작용과 특별를 만들 구도를 사용하는 경우

Question

오류 구도를 withState 및 lifecycle :

내 구성 요소 트리가 다음과 같습니다

warning.js?8a56:36 Warning: React.createElement: type should not be null, undefined, boolean, or number. It should be a string (for DOM elements) or a ReactClass (for composite components). Check the render method of `AppContainer`. 

:

export function SimpleImage(props) { 
    const { 
    src, 
    width = 200, 
    height = 200, 
    rounded, 
    circle, 
    status, 
    onLoad, 
    onFail, 
    } = props; 

    const mainWrapperStyle = style({ 
    backgroundColor: 'white', 
    backgroundSize: 'contain', 
    backgroundRepeat: 'none', 
    boxSizing: 'border-box', 
    position: 'relative', 
    width, 
    height, 
    }); 

    const roundedStyle = style({ 
    borderRadius: '10%', 
    overflow: 'hidden', 
    }); 

    const circularStyle = style({ 
    borderRadius: '50%', 
    overflow: 'hidden', 
    }); 

    const defaultImageStyle = style({ 
    opacity: 0, 
    transisition: 'opacity 150ms ease', 
    }); 

    const loadedImageStyle = style({ 
    opacity: 1, 
    }); 

    let imageStyle = defaultImageStyle; 

    let wrapperStyle = mainWrapperStyle; 
    if (rounded) { 
    wrapperStyle = merge(mainWrapperStyle, roundedStyle); 
    } else if (circle) { 
    wrapperStyle = merge(mainWrapperStyle, circularStyle); 
    } 

    if (status === LOADED) { 
    imageStyle = merge(defaultImageStyle, loadedImageStyle); 
    } 

    const image = (<img 
     {...imageStyle} 
     src={src} 
     width={width} 
     height={height} 
     role="presentation" 
     onLoad={this.onLoad} 
     onError={this.onFail} 
     />); 

    let statusIndicator = null; 
    if (this.state.status === LOADING) { 
    statusIndicator = (<LoadingIndicator />); 
    } else if (this.state.status === FAILED) { 
    statusIndicator = (<ErrorIndicator />); 
    } 

    return (<div {...wrapperStyle}> 
    {statusIndicator} 
    {image} 
    </div>); 
} 

const Image = compose(
    withState(
    'status', 
    'setStatus', 
    ({ src })=> src? LOADING: PENDING 
), 
    withProps(
    ({ setStatus }) => ({ 
    onLoad() { 
     setStatus(LOADED); 
    }, 
    onFail() { 
     setStatus(FAILED); 
    }, 
    reset() { 
     setStatus(PENDING) 
    }, 
    resetToLoading() { 
     setStatus(LOADING) 
    }, 
    })), 
    lifecycle({ 
    componentWillReceiveProps(nextProps) { 
     if(nextProps.src == null){ 
     this.props.reset(); 
     } else if(nextProps.src !== this.props.src) { 
     this.props.resetToLoading(); 
     } 
    } 
    }) 
)(SimpleImage); 

Answer 1

SimpleImage 구성 요소는 여전히에 대한 참조를 가지고 this 및 state입니다. 이러한 참조를 제거하고 onLoad, this.onFail을 onFail으로 바꾸고 this.state.status을 status으로 변경하면 this.onLoad이 올바르게 작동합니다.

업데이트 SimpleImage 구성 요소는 다음과 같습니다

export function SimpleImage(props) { 
    const { 
    src, 
    width = 200, 
    height = 200, 
    rounded, 
    circle, 
    status, 
    onLoad, 
    onFail, 
    } = props; 

    const mainWrapperStyle = style({ 
    backgroundColor: 'white', 
    backgroundSize: 'contain', 
    backgroundRepeat: 'none', 
    boxSizing: 'border-box', 
    position: 'relative', 
    width, 
    height, 
    }); 

    const roundedStyle = style({ 
    borderRadius: '10%', 
    overflow: 'hidden', 
    }); 

    const circularStyle = style({ 
    borderRadius: '50%', 
    overflow: 'hidden', 
    }); 

    const defaultImageStyle = style({ 
    opacity: 0, 
    transisition: 'opacity 150ms ease', 
    }); 

    const loadedImageStyle = style({ 
    opacity: 1, 
    }); 

    let imageStyle = defaultImageStyle; 

    let wrapperStyle = mainWrapperStyle; 
    if (rounded) { 
    wrapperStyle = merge(mainWrapperStyle, roundedStyle); 
    } else if (circle) { 
    wrapperStyle = merge(mainWrapperStyle, circularStyle); 
    } 

    if (status === LOADED) { 
    imageStyle = merge(defaultImageStyle, loadedImageStyle); 
    } 

    debugger 
    const image = (<img 
     {...imageStyle} 
     src={src} 
     width={width} 
     height={height} 
     role="presentation" 
     onLoad={onLoad} 
     onError={onFail} 
     />); 

    let statusIndicator = null; 
    if (status === LOADING) { 
    statusIndicator = (<LoadingIndicator />); 
    } else if (status === FAILED) { 
    statusIndicator = (<ErrorIndicator />); 
    } 

    return (<div {...wrapperStyle}> 
    {statusIndicator} 
    {image} 
    </div>); 
}