與TypeScript反應 - 在無狀態函數中定義defaultProps

我正在使用React與TypeScript並創建了無狀態函數。爲了便於閱讀，我從示例中刪除了無用的代碼。與TypeScript反應 - 在無狀態函數中定義defaultProps

interface CenterBoxProps extends React.Props<CenterBoxProps> { 
    minHeight?: number; 
} 

export const CenterBox = (props: CenterBoxProps) => { 
    const minHeight = props.minHeight || 250; 
    const style = { 
     minHeight: minHeight 
    }; 
    return <div style={style}>Example div</div>; 
};

一切都很好，這段代碼工作正常。但是我的問題是：如何爲CenterBox組件定義defaultProps？正確哪能：

正如在react docs提到：如此反覆error TS2339: Property 'defaultProps' does not exist on type '(props: CenterBoxProps) => Element'.

：

CenterBox.defaultProps = { 
    minHeight: 250 
}

但這個代碼生成TSLint錯誤：

(...) They are pure functional transforms of their input, with zero boilerplate. However, you may still specify .propTypes and .defaultProps by setting them as properties on the function, just as you would set them on an ES6 class. (...)

，因爲它應該很容易在我的上面的堆棧（React + TypeScript）中定義defaultProps？

來源

2016-05-16 Mateusz Jagiełło

經過2個小時尋找解決方案... 它的工作。

如果你想定義deufaultProps你的函數定義行應該是這樣的：

export const CenterBox: React.SFC<CenterBoxProps> = props => { 
    (...) 
};

然後，你可以這樣定義道具：

CenterBox.defaultProps = { someProp: true }

注意React.SFC是別名React.StatelessComponent。

我希望這個問題（和答案）有助於某人。確保你已經安裝了最新的React類型。

來源

2016-05-16 20:03:33

你可以在如何獲得defaultProps工作上添加一個更具體的例子嗎？感謝：D –

下面是它如何工作的狀態功能，以防其他人偶然發現這一點。關鍵是聲明defaultProps作爲一個靜態變量。

interface IBoxProps extends React.Props<IBoxProps> { 
    x?: number; 
    y?: number; 
    height?: number; 
    width?: number; 
} 

interface IBoxState { 
    visible?: boolean; 
} 

export default class DrawBox extends React.Component<IBoxProps, IBoxState> { 
    static defaultProps: IBoxProps; 

    constructor(props: IBoxProps) { 
     super(props); 
    } 
    ... 
} 

DrawBox.defaultProps = { 
    x=0; 
    y=0; 
    height=10; 
    weight=10; 
};

來源

2016-10-13 20:05:34

與TypeScript反應 - 在無狀態函數中定義defaultProps

回答

相關問題