React中如何将propertyValue字符串转为组件属性(props)传递？

你的问题核心有三个：allAlerts函数返回值错误、属性存储格式不符合React要求、属性传递方式不对。

第一步：修正数据结构与函数返回值 #

你现在把属性存成了字符串（比如'bgColor="red"'），React无法直接解析这种格式为组件属性；同时allAlerts函数返回的是自身而非数据数组，遍历根本拿不到正确数据源。先改成键值对的对象格式，修正函数返回：

const allAlerts = () => {
    const alertsData2 = [
        [
            { bgColor: 'red' },
            { alignSelf: 'center' }
        ]
    ];
    return alertsData2; // 返回数据数组，不是函数自身
};

第二步：正确传递属性给Alert组件 #

React中要把对象的键值对作为组件属性，需要用展开运算符...，同时注意你内层map的参数错误（把第二个参数写成了onClick，实际是索引，且你的数据里也没有onClick字段），修改渲染代码：

{
    allAlerts().map((alerts, outerIndex) => (
        <>
            {alerts.map((props, innerIndex) => (
                <div key={`alert-${outerIndex}-${innerIndex}`}>
                    <Alert {...props}>Alert Default</Alert>
                </div>
            ))}
        </>
    ))
}

原写法不生效的原因 #

1. 字符串格式的属性React不会自动解析为组件的键值对属性；
2. 直接写<Alert propertyValue>相当于给Alert传了一个名为propertyValue、值为true的布尔属性，和你想要的效果完全无关；
3. allAlerts函数原本返回自身而非数据数组，遍历逻辑从一开始就拿不到正确数据。

如果业务场景必须保留字符串格式的属性（比如从后端获取），可以额外做解析（比如用正则匹配键和值），但更推荐一开始就用键值对的对象格式存储属性，避免额外解析的麻烦和安全风险。

内容的提问来源于stack exchange，提问作者shkurta