React Native Action Button - 无法动态添加按钮

Posted 2023-02-22

【中文标题】React Native Action Button - 无法动态添加按钮

【英文标题】：React Native Action Button - Unable to Add buttons Dynamically

【发布时间】：2020-09-19 16:04:33

【问题描述】：

无法动态添加 ActionButton 项。

我有以下设置 --

<ActionButton>
    <ActionButton.item name=constant_btn1 />
    <ActionButton.item name=constant_btn2 />
</ActionButton>

我想在此列表中添加动态按钮。 （列表从后端接收）

我创建了一个返回这些按钮视图的函数。

getDynamicBtns() 
    return dynamicButtonsList.map(item, key) => (
        return <ActionButton.item name=item.btnName />;
    );

我也是这样用的-->

<ActionButton>
    <ActionButton.item name=constant_btn1 />
    <ActionButton.item name=constant_btn2 />
    this.getDynamicBtns()
</ActionButton>

所以这是渲染我的常量按钮，但不是动态按钮。

编辑 - 我从getDynamicBtns() 函数返回地图，并在render() 中调用函数调用。这只是我编写的一些简化示例代码。

EDIT2 - 为防止混淆，请更改原始问题的代码。

【问题讨论】：

尝试console.log dynamicButtonsList 数组来检查它是否不为空

@zb22 非常感谢！检查后我知道 的孩子有点不正确。我会发布一个答案来更好地解释它。

【参考方案1】：

您不会在 getDynamicBtns 函数中返回任何内容。您应该返回地图的结果：

getDynamicBtns() 
    return dynamicButtonsList.map(item => <ActionButton.item name=item.btnName />)

【讨论】：

对不起@Ariel Perez。我正在这样做。没有在问题中添加它。将更新。但这并不能解决问题。

【参考方案2】：

我想通了。 问题是 .map 函数返回一个对象数组。

所以最终要渲染的元素是一个 React 元素 ActionButton。

无论我的动态列表的大小如何，ActionButton 都只有 3 个孩子。

ActionButton.children: [
    staticButton1,
    staticButton2,
    [dynamicButton1, dynamicButton2, dynamicButton3, ....]
];

作为解决方案，我将它们放入单独的列表中，并找到了列表的联合。 然后在<ActionButton>中渲染列表

类似的东西 ->

let listA = [<ActionButton.Item name='staticBtn1.name' />];

let listB = this.getDynamicBtns();

let finalList = _.union(listA, listB);

然后将其渲染为-->

<ActionButton>
    finalList
</ActionButton>