0

我有一个无状态功能组件，它呈现（约会）时间线。它的签名是：

function Timeline({loading, start, end, data}) { ... }

它通过 ajax 请求获取数据。为此，我创建了一个 HOC。你可以像这样使用它

// AppointmentTimeline.jsx
export default ajaxLoader({
    route: 'secret.url',
    data: {some: 'post data'},
})(Timeline);

然后我需要添加一些控件来调整时间线日期范围。我用作文做到了这一点：

export default class TimelineWithPicker extends React.PureComponent {
    render() {
        return (
            <InlineBlock>
                <AppointmentTimeline {...this.props} start={this.state.start}/>
                {/* controls here */}
            </InlineBlock>
        );
    }
}

所有这些都很好用，但现在我意识到我的Timeline组件比我最初想象的更实用。我想重用相同的组件和控件，但使用不同的数据源。

即，我想Timeline用不同的ajaxLoader. 问题是TimelineWithPicker现在已经AppointmentTimeline出现了。

TimelineWithPicker使我可以使用不同的数据源渲染时间线的最佳方法是什么？

我应该将子组件 ( AppointmentTimeline) 作为道具传递，还是应该作为道具传递route并data在渲染时动态构建新的 HOC？IE，

let {data,route} = this.props;
let TimelineLoader = ajaxLoader({data,route})(Timeline);
return <div><TimelineLoader ... /></div>

以这样的方式创建新组件是否昂贵render()？

4

0 回答 0