Javascript 如何处理；多态性；功能部件

想象一下，我正在编写一个react应用程序，用户可以将不同颜色和大小的形状添加到某个“工作区”。假设我们有

Circle

和

Square

这两个组件，它们具有不同的属性来定义它们。当用户添加形状时，其道具将添加到工作区组件的状态。然后，工作空间将绘制以下形状：

import React，{useState}来自“React”；
接口ISquareProps{
颜色：字符串；
线宽：数字；
}
接口ICircleProps{
颜色：字符串；
半径：数字；
}
constsquare=（{lineLength}:ISquareProps）=>（我是一个直线长度为{lineLength}的正方形）；
常量圆=（{radius}:ICircleProps）=>（我是一个半径为{radius}的圆）；
常量工作空间=（）=>{
const[squares，setSquares]=useState（新数组（））；
const[circles，setCircles]=useState（新数组（））；
返回(
{squares.map（（squares）=>）}
{circles.map（（circle）=>）}
);
};

请在此处找到一个示例：

虽然这适用于两种不同的形状，但如果我们有许多形状，它会变得很麻烦

如果形状知道如何渲染自己呢？那么这个呢：

import React，{useState}来自“React”；
界面设计{
颜色：字符串；
render（）：JSX.Element；
}
//----广场-------
接口ISquareProps扩展了IShapeProps{
线宽：数字；
}
constsquare=（{lineLength}:ISquareProps）=>（我是一个直线长度为{lineLength}的正方形）；
类SquareProps实现ISquareProps{
公共颜色：字符串；
公共线路长度：数字；
构造函数（线宽：数字，颜色：字符串）{
这个颜色=颜色；
this.lineLength=线宽；
}
公共渲染（）{
返回；
}
}
//----圆圈-------
接口ICircleProps扩展了IShapeProps{
半径：数字；
}
常量圆=（{radius}:ICircleProps）=>（我是一个半径为{radius}的圆）；
类CircleProps实现ICIRCEProps{
公共颜色：字符串；
公共半径：数字；
构造函数（颜色：字符串，半径：数字）{
这个颜色=颜色；
这个半径=半径；
}
公共渲染（）{
返回；
}
}
//------工作空间-------
常量工作空间=（）=>{
const[shapes，setShapes]=useState（新数组（））；
返回(
{shapes.map（（shape）=>shape.render（））}
);
};

下面是一个工作示例：

这是处理带有功能组件的“多态”组件的可行方法吗？

---

是否应该考虑其他模式？

您似乎正在做的只是对

形状

和

圆形

组件进行curry处理，但从我所看到的情况来看，渲染方法中没有任何东西实际告诉形状它是什么形状。 你需要一个参数来决定渲染函数是哪一个

不过，您可以做一些改进：

1） 不过，对我来说更有意义的是，与其用一些“函数”来修饰它，不如用一个足够聪明的react组件来包装它

2） 使用道具而不是类属性，这就是它们的用途。没有理由将其重新分配给

此

变量

3） 使用条件JSX根据道具决定渲染哪个组件（您甚至可以切换形状，当新道具触发重新渲染时，它们将切换）

4） 我不认为有太多的必要单独实现您拥有的prop接口，您可以通过函数组件内联实现

export const Shape = (props: IShapeProps) => {

    public render() {
        if (this.props.shapeType === 'Square') {
           return <Square lineheight={this.props.lineheight} color={this.props.color} />;
        } else {
           return <Circle radius={this.props.radius} color={this.props.color} />;
        }  
    }
}

导出常量形状=（道具：IShapeProps）=>{
公共渲染（）{
if（this.props.shapeType==='Square'）{
返回；
}否则{
返回；
}  
}
}