Javascript React JS-如何基于HoC ajax响应动态创建子组件

我基本上是新来的蜜蜂。我的目的是从组件发出ajax调用，并基于响应将响应数据作为道具传递给子组件，我需要基于父ajax调用动态创建子组件。它可以通过一个临时的，但我不太确定

构建我的假设-

<MasterComponent> // Can be a HOC
    <ProductLayout props={data} /> // should be dynamic
</MasterComponent>

---

在这种情况下，Object.keys应该起作用。它将创建正确数量的组件

Object.key（placements.map）（数据）=>{
返回
})

您在MasterComponent中获取数据，对吗

所以看起来是这样的：

class MasterComponent extends React.Component {
    componentDidMount() {
        // fetch() Your API request
        // this.setState({ data: response });
    }

    render() {
        const { data } = this.state;

        if (!data.placements) return null;
        return data.placements.map((data, index) => <ProductLayout data={data} />);
    }
}

类主组件扩展了React.Component{
componentDidMount（）{
//获取（）您的API请求
//this.setState（{data:response}）；
}
render（）{
const{data}=this.state；
如果（！data.placements）返回空值；
返回data.placements.map（（数据，索引）=>）；
}
}

---

但是您还需要进行空检查，因为如果您的响应中不存在位置，您可以使用

JSON.parse

解析您的响应，然后通过

placements

进行映射，就像这样

data.placements.map（placement=>）

class MasterComponent extends React.Component {
    componentDidMount() {
        // fetch() Your API request
        // this.setState({ data: response });
    }

    render() {
        const { data } = this.state;

        if (!data.placements) return null;
        return data.placements.map((data, index) => <ProductLayout data={data} />);
    }
}