Question

我正在使用带有react-redux的打字稿。我有以下组件，它不会从父级获取任何“ OwnProp”，而是从redux状态获取一个prop。 Redux从Parent Component给了我错误，它期望来自parent的prop totalRows。我该如何解决？

import { connect } from "react-redux";

interface ChatSectionStateProp{
    totalRows : number 
}

export const ChatSection: React.SFC<ChatSectionStateProp> = (prop) => {
    const totalRows = prop.totalRows
    return (
        <div style={{ 
                backgroundColor: '#5A657B' , 
                overflowY:'scroll' , 
                gridColumn:'3 / 13' , 
                gridRow:`2 / ${totalRows+1}` 
        }} >

        </div>
    );
}

const mapStateToProps = (state:ChatSectionStateProp)=>{
    totalRows : state.totalRows
}

export default connect(mapStateToProps)(ChatSection) ;

Answer 1

结果是，我不仅导出了连接的组件，还导出了原始Component。删除导出即可完成工作。这是修改后的代码。

import { connect } from "react-redux";

interface ChatSectionStateProp{
    totalRows : number 
}

const ChatSection: React.FC<ChatSectionStateProp> = (prop) => {
    const totalRows = prop.totalRows
    return (
        <div style={{ 
                backgroundColor: '#5A657B' , 
                overflowY:'scroll' , 
                gridColumn:'3 / 13' , 
                gridRow:`2 / ${totalRows+1}` 
        }} >

        </div>
    );
}

const mapStateToProps = (state:ChatSectionStateProp)=>({
    totalRows : state.totalRows
});

export default connect(mapStateToProps)(ChatSection) ;

将Redux与TypeScript结合使用时，如何在没有ownProps的情况下导出React组件？

1 个答案: