Reactjs 根据阵列属性返回多个组件

尝试从ActionButtons组件返回多个操作按钮：

export default class ActionButtons extends Component {
render() {
    console.log(this.props.actions)
    return(
    this.props.actions.map((field, i) => {
        <div key={field.href}>
            <DefaultButton
                key={field.href}
                text={field.label}
                href={field.href}
            />
        </div>
    })
    )
    }
}

导出默认类ActionButtons扩展组件{
render（）{
console.log（this.props.actions）
返回(
this.props.actions.map（（字段，i）=>{
})
)
}
}

使用以下代码从另一个组件调用它：

      const actions = [
            {"label": "Go Back", "href":"www.google.com"}
        ];
<ActionButtons actions={actions} />

const actions=[
{“label”：“返回”、“href”：“www.google.com”}
];

---

在ActionButtons组件上，如果我只返回一个按钮而没有映射，那么它就工作了。我缺少什么？

您需要从内部

map

//inside render
return this.props.actions.map((field, i) => {
    return (
        <div key={field.href}>
            <DefaultButton
                key={field.href}
                text={field.label}
                href={field.href}
            />
        </div>
    )
}

export default class ActionButtons extends Component {
    render() {
        console.log(this.props.actions)
        return (
            <>
            {
                this.props.actions.map((field, i) => {
                    return (
                        <div key={field.href}>
                            <DefaultButton
                                key={field.href}
                                text={field.label}
                                href={field.href}
                            />
                        </div>
                    )
                })
            }
            </>
        )
    }
}