在 render() 中继承还是编写？

Question

我正在学习 React 并使用 material-ui/Table。我已经定义了 TestTable 和 TestRow 类。 TestTable 根据 this.props（未显示）创建一个数字 TestRows，然后返回：

  return (<Table multiSelectable={true}>
                    <TableHeader enableSelectAll={true} displaySelectAll={true}>
                        <TableRow>
                            <TableHeaderColumn>Name</TableHeaderColumn>
                            <TableHeaderColumn>Description</TableHeaderColumn>
                        </TableRow>
                    </TableHeader>
                    <TableBody> {rows} </TableBody>
                </Table>);

现在我想知道 TestRow 是否应该从 TableRow 继承，然后以某种方式添加两个 TableHeaderColumns 还是应该组装整个行。

   render()
    {
        super.render()

        // Add header columns here? Or not inherit and use what is below?

        // return (<TableRow key={this.props.key} selected={false}>
        //             <TableHeaderColumn>{this.props.test.name}</TableHeaderColumn>
        //             <TableHeaderColumn>{this.props.test.description}</TableHeaderColumn>
        //         </TableRow>);

    }

Answer 1

在 React 中执行此操作的首选方法是使用组合。一般来说，当组合可以工作时使用继承是个坏主意。