如何使用TypeScript和樣式組件進行縮減形式的工作？

Question

我試圖讓redux-form與TypeScript和樣式組件一起工作。在下面的代碼示例中，爲什麼它不適用於樣式化的輸入組件？輸入呈現，但每次按鍵都會丟失焦點。它也需要兩次點擊來聚焦元素。看起來像redux-form試圖控制從樣式組件返回的包裝元素？ redux-form和styled-components都使用HOC - 高階組件將道具傳遞給底層元素。

export interface ITxtProps extends WrappedFieldProps { 
    label?: string; 
} 

export const FieldHack = class extends Field<any> {}; 

const renderTxt = (props: ITxtProps & GenericFieldHTMLAttributes) => { 
    const StyledInput = styled.input` 
    background-color: deeppink; 
    `; 
    const notWorking = <StyledInput {...props.input} />; 
    const worksPerfectly = <input {...props.input} />; 
    return (
    <div> 
    <div>{props.label}</div> 
    {notWorking} 
    </div> 
); 
} 

const NormalLoginComponent = (props: { 
    handleSubmit?: SubmitHandler<{}, {}>; 
}) => { 
    const { handleSubmit } = props; 
    return (
    <form onSubmit={handleSubmit}> 
     {/* this does not work when using styled components: */} 
     <Field name={'email'} component={renderTxt} /> 

     {/* this gives an error, property label does not exist on type... */} 
     {/*<Field name={'email'} component={renderTxt} label="email" />*/} 

     {/* this works, but no intellisense/static types */} 
     <FieldHack name={'email2'} component={renderTxt} label="email" /> 

     <Field name={'password'} component={'input'} type="password" /> 
     <Button text={'log in'} onClick={handleSubmit} /> 
    </form> 
); 
}; 

export interface ILoginForm { 
    email: string; 
    password: string; 
} 

const LoginForm = reduxForm<Readonly<ILoginForm>, {}>({ 
    form: 'loginNormal', 
})(NormalLoginComponent); 

Answer 1

是的，我終於想通了。我做了一個錯誤，那就是要創造我的渲染方法中風格的組分包裝：

const StyledInput = styled.input` 
    background-color: deeppink; 
; 

顯然，這是不安全的應用HOC - render（）中的高階組件。所以移動HOC時候就應該在外面工作呈現：

export interface ITxtProps extends WrappedFieldProps { 
    label?: string; 
} 

export const FieldHack = class extends Field<any> {}; 

// wrap you HOC outside render: 
const StyledInput = styled.input` 
    background-color: deeppink; 
    `; 

const renderTxt = (props: ITxtProps & GenericFieldHTMLAttributes) => { 
    // works now :) 
    const notWorking = <StyledInput {...props.input} />; 
    const worksPerfectly = <input {...props.input} />; 
    return (
    <div> 
    <div>{props.label}</div> 
    {notWorking} 
    </div> 
); 
} 

搞清楚了這一點，當我在讀另一HOC庫中的文檔，這裏是一個鏈接，說明它是安全的應用（任意）HOC：redux-auth-wrapper documentation on HOCs