Javascript React.cloneElement/HOC/Transclusion

我把一个带有React的表控件放在一起，它几乎遵循这种模式一直到单元格：

class Table extends Component {
    static propTypes = {
        tableClass: PropTypes.string,
        columnDefinitions: PropTypes.array.isRequired
    }

    constructor(props) {
        super(props);
    }

    render() {
        const { tableClass, children } = this.props;
        const passthroughProps = except(this.props, ['id', 'key', 'children', 'form', 'tableClass']);
        const transformedChildren = React.Children.map(children, c => React.cloneElement(c, passthroughProps));

        return (
            <div className={ `${ tableClass ? `${tableClass} ` : '' }table` }>
                { transformedChildren }
            </div>
        );
    }
}

export default Table;

即使我想放弃像转换一样的方法，我也不确定如何使用高阶组件来实现这一点，因为它们似乎更适合于更确定的方法。为了澄清，我们为

卡

和

卡列表

设置了HOC：

const CardListHOC = (Card) => CardList extends Component {
    // propTypes, etc...
    render() {
        const { items } = this.props;
        const passthroughProps = except(this.props, ['id', 'key', 'children', 'form', 'items']);

        return (
            {items.map(i => (<div className="card-list-wrapper"><Card {...passthroughProps} item={i}/></div>)}
        );
    }
}

const CardHOC = (Child) => Card extends Component {
    // propTypes, etc...
    render() {
        const passthroughProps = except(this.props, ['id', 'key', 'children', 'form']);

        return (
            <div className="card-wrapper">
                <Child {...passthroughProps} />
            </div>
        );
    }
}

---

有没有更好的办法？也许有一种方法是我看不到的？如果有人能给我指出正确的方向，我将不胜感激

令人惊讶的是——我只不过是昨天——React元素没有使用

React.createElement

（又称

）实例化。您可以尝试，只有当元素装载到DOM上时，类才会被实例化。这就是为什么

cloneElement

不是低效的，这也是为什么子元素在转换之前不会被渲染的原因

---

话虽如此，您可能想看看React for magic powder。

嗯，我在所需道具周围有一些奇怪的行为。。。我认为这与孩子们在转化之前被渲染有关，但也许是其他原因。。。是时候把控制权从大项目中拉出来，单独开发了。嘿，马丁，你在这种情况下做了什么？我也有同样的问题，孩子们没有新的道具。你是不是走了这条路线？@geoboy

const CardListHOC = (Card) => CardList extends Component {
    // propTypes, etc...
    render() {
        const { items } = this.props;
        const passthroughProps = except(this.props, ['id', 'key', 'children', 'form', 'items']);

        return (
            {items.map(i => (<div className="card-list-wrapper"><Card {...passthroughProps} item={i}/></div>)}
        );
    }
}

const CardHOC = (Child) => Card extends Component {
    // propTypes, etc...
    render() {
        const passthroughProps = except(this.props, ['id', 'key', 'children', 'form']);

        return (
            <div className="card-wrapper">
                <Child {...passthroughProps} />
            </div>
        );
    }
}

<Table columnDefinitions={columnDefinitions}>
    <Row columnDefinitions={columnDefinitions}>
        <Cell/>
        <Cell/>
        <Cell/>
    </Row columnDefinitions={columnDefinitions}>
    <CustomRow columnDefinitions={columnDefinitions}/>
</Table>