gpt4 book ai didi

reactjs - React 功能组件继承

转载 作者:行者123 更新时间:2023-12-03 14:04:11 26 4
gpt4 key购买 nike

我创建了一个 React 功能组件,它是 react-data-grid 组件的包装器。现在我需要一个完全相同的第二个组件,除了一个函数(如果您熟悉 react-data-grid,则为 rowGetter。)
我在 Intranet 上工作,所以我将输入一个快速示例...

function UsersInfoDataTable(props) {

const userInfoCols = [
{key: "a", name: "A", ...},
{key: "b", name" "B", ...},
{key: "c", name" "C", ...},
...
];

const aCellCreation = (aData, description, index) => (
<span title={...}>...</span>
)

const bCellCreation = (bData, index) => (
<div className={...}>...</div>
}

...


const formattedTableData = props.myData.map(function (obj, index) {
//do some stuff
return {"a": aCellCreation(obj.a, obj.desc,index), "b": bCellCreation(obj.b, index), ...}
});

const rowGetter = rowNumber => formattedTableData[rowNumber];

return (
<div>
<ReactDataGrid
columns={userInfoCols}
rowGetter={rowGetter}
rowCount={formattedTableData.length}
minHeight={props.minHeight}
/>
</div>
)
}

export default UsersInfoDataTable;
现在我也需要这样的东西......
function UsersInfoDataTableSlightlyDifferent(props) {

//i need the same columns
const userInfoCols = [
{key: "a", name: "A", ...},
{key: "b", name: "B", ...}
];

//i need same cell format
const aCellCreation = (aData, description, index) => (
<span title={...}>...</span>
)

//i need same cell format
const bCellCreation = (bData, index) => (
<div className={...}>...</div>
}

...

//the internals of this function will be pretty much the only difference
const formattedTableData = props.myData.map(function (obj, index) {

//do some different stuff than previous component as myData will be
//in a different format when passed here versus the other component

//the return will be essentially the same - maybe slightly different with
//what is passed to the "creation" functions
return {"a": aCellCreation(obj.a, obj.desc,index), "b": bCellCreation(obj.b, index), ...}
});

const rowGetter = rowNumber => formattedTableData[rowNumber];

return (
<div>
<ReactDataGrid
columns={userInfoCols}
rowGetter={rowGetter}
rowCount={formattedTableData.length}
minHeight={500}
/>
</div>
)
}

export default UsersInfoDataTable;
我想通过几种方式来做我想做的事......
  • 复制和粘贴,不可重复使用 - 不好
  • 重用完全相同的组件,但检查一个 Prop 中的数据,如果它存在循环并以其他方式循环其他 Prop 并做不同的事情
  • 更改为使用 React 类而不是功能组件并使用继承(我以前没有这样做,所以我必须阅读一些内容)
  • 更改为使用 React 类并使所有函数都是静态的,并在两个组件中使用来自一个组件的静态函数。 IE。 aCellCreation() 和 bCellCreation() 将是静态的。

  • 我有点倾向于#2,但是如果我想要基本上相同的表并显示来自 4 个不同来源的用户信息怎么办 - 它可能会变得丑陋。例如 dataToMapThrough = props.allUsersData? props.allUserData : (props.usersFromUSAData? props.usersFromUSAData : ...)有关实现此目的的最佳方法的任何建议?

    更新
    如果有人感兴趣,我会在这里阅读 Andy_D 提供的文档。希望没有错别字,因为我必须手动输入所有内容,因为我在内部网站上工作......
    function UsersInfoDataTableDisplayer(props) {

    const userInfoCols = [
    {key: "a", name: "A", ...},
    {key: "b", name: "B", ...}
    ];

    const aCellCreation = (aData, description, index) => (
    <span title={...}>...</span>
    )

    const bCellCreation = (bData, index) => (
    <div className={...}>...</div>
    }

    ...

    //data will already be processed exactly how this Component needs it every time
    //in the specialized version of this Component
    const formattedTableData = props.userInfoData.map(function (obj, index) {

    //Probably nothing to do here since data is processed in the specialized
    //version of this component

    return {"a": aCellCreation(obj.a, obj.b,index), "b": bCellCreation(obj.b, index),"c": obj.c}
    });

    const rowGetter = rowNumber => formattedTableData[rowNumber];

    return (
    <div>
    <ReactDataGrid
    columns={userInfoCols}
    rowGetter={rowGetter}
    rowCount={formattedTableData.length}
    minHeight={500}
    />
    </div>
    )
    }

    export default UsersInfoDataTableDisplayer;
    现在这是一个专门的版本 #1 ...
    function UsersInfoFromService1DataTable(props) {

    //The format of the JSON passed in is one way here
    const formattedTableData = props.abcData.map(function (obj, index) {

    //"combine" and "clean" or whatever you need here
    let aLikeData = obj.firstName + ' ' + obj.lastName

    return {"a": aLikeData, "b": obj.description, "c": obj.whatever,...}
    });



    return (
    <div>
    <UsersInfoDataTableDisplayer
    userInfoData = {formattedTableData}
    minHeight={500}
    />
    </div>
    )
    }

    export default UsersInfoFromService1DataTable;
    这是专门的版本#2 ...
    function UsersInfoFromService1DataTable(props) {

    //The format of the JSON passed in is one way here
    const formattedTableData = props.xyzData.map(function (obj, index) {

    //"combine" and "clean" or whatever you need here
    let aLikeData = obj.fullName

    return {"a": aLikeData, "b": obj.desc, "c": obj.something,...}
    });



    return (
    <div>
    <UsersInfoDataTableDisplayer
    userInfoData = {formattedTableData}
    minHeight={900}
    />
    </div>
    )
    }

    export default UsersInfoFromService2DataTable;

    最佳答案

    React 文档在这里解决了这个问题:https://facebook.github.io/react/docs/composition-vs-inheritance.html

    我读过它,并在这些指导方针内,做任何看起来最好的事情。

    TL;DR - 不要使用继承。但请务必阅读。

    关于reactjs - React 功能组件继承,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44287518/

    26 4 0
    Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
    广告合作:1813099741@qq.com 6ren.com