與錯誤創建臨時反應，使用重新構圖時創建一個特別的重構

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組件仍然要引用盡管它是一個無狀態的功能組件，刪除這些參考文件並用onLoad，this.onFail和onFail替換this.onLoad，並將this.state.status更改爲status正常工作。

更新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>); 
}