维护React组件列表,然后渲染到父组件中。

我有一个关于维护一个多态React组件数组的假设性问题。是否有可能良好的React实践来维护一个组件数组,这些组件是一个普通组件的后裔,然后在容器中呈现它们?例如

import * as React from 'react';

import GenericBlock from './GenericBlock';
import { BlockTypeA, BlockTypeB, BlockTypeC } from './MyBlocks';

export default class BlockHolder extends React.Component {
    blocks : GenericBlock[] = [ <BlockTypeA />, <BlockTypeB />, <BlockTypeC /> ];

    render() {
        return (
            <div id="workspace">
                {
                    this.blocks
                }
            </div>);
    };
};

GenericBlock.tsx

import * as React from 'react';

export default class GenericBlock extends React.Component {
    render() { return (<div></div>); }
}

MyBlocks.tsx。

import * as React from 'react';

import GenericBlock from './GenericBlock';

class BlockTypeA extends GenericBlock {
    render() { return (<div></div>); }
};

class BlockTypeB extends GenericBlock {
    render() { return (<div></div>); }
};

class BlockTypeC extends GenericBlock {
    render() { return (<div></div>); }
};

export { BlockTypeA, BlockTypeB, BlockTypeC };

上面的代码片段产生了错误: Objects are not valid as a React child但我认为它抓住了我所说的精神。有什么方法可以让上面的方案正常工作吗?

我确信这个问题已经有人问过了,也有人回答过了,但我似乎无法让谷歌搜索正确。

EDIT:

添加了沙盒链接。https:/codesandbox.ioswizardly-wilson-vb7nn。

现在我遇到了一个新的错误。Type 'Element' is missing the following properties from type 'GenericBlock': render, context, setState, forceUpdate, and 2 more.

EDIT 2:

打字: blocks 数组作为JSX.Element删除了错误,并使一切工作,但这似乎不是很好的做法,因为 JSX.Element 可以是任何元素,而将它打成 GenericBlock 是为了确保所有的元素都是一个特定组件的后裔。

解决方案:

在React代码中,它完美地工作。https:/codesandbox.iosoptimistic -ptolemy -g25ge。

没有错误,没有警告

import * as React from "react";

import { BlockTypeA, BlockTypeB, BlockTypeC } from "./MyBlocks";

export default class BlockHolder extends React.Component {
  blocks = [
    <BlockTypeA key={1} />,
    <BlockTypeB key={2} />,
    <BlockTypeC key={3} />
  ];

  render() {
    return <div id="workspace">{this.blocks}</div>;
  }
}

import * as React from "react";

export default class GenericBlock extends React.Component {
  render() {
    return <div />;
  }
}

import * as React from 'react';

import GenericBlock from './GenericBlock';

class BlockTypeA extends GenericBlock {
    render() { return (<div>A</div>); }
};

class BlockTypeB extends GenericBlock {
    render() { return (<div>B</div>); }
};

class BlockTypeC extends GenericBlock {
    render() { return (<div>C</div>); }
};

export { BlockTypeA, BlockTypeB, BlockTypeC };
"dependencies": {
    "react": "16.12.0",
    "react-dom": "16.12.0",
    "react-scripts": "3.0.1"
  },
  "devDependencies": {
    "typescript": "3.8.3"
  }

给TA打赏
共{{data.count}}人
人已打赏
未分类

Excel 2016 : 右键--> 表中的刷新实际上并不刷新数据,从SQL数据库中

2022-9-8 12:50:39

未分类

sqlite3在控制台与Python脚本的结果不同

2022-9-8 12:50:41

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索