React Native中动态样式属性赋值未按预期生效的问题咨询

嘿，你遇到的问题核心是React Native函数组件接收props的方式错了，咱们一步步理清楚：

你的误解点 #

React函数组件的第一个参数是一个props对象，而不是单独的多个参数。你写的const Rectangle = (label, value) => { ... }，这里的label其实是整个props对象，value则是undefined，所以你试图用{[label]: value}修改背景色的时候，实际上是在使用一个无效的键值对，自然不会生效，所有方块都沿用了styles里默认的绿色背景。

修正后的代码 #

import React, { useState } from "react";
import { View, TouchableOpacity, Text, StyleSheet } from "react-native";

const styles = { width: 100, height: 100, backgroundColor: "green" };

// 这里要解构props对象里的label和value
const Rectangle = ({ label, value }) => {
  return <View style={[styles, { [label]: value }]} />;
};

const Page = () => {
  return (
    <View style={{ flex: 1, justifyContent: "space-evenly" }}>
      <Rectangle label="backgroundColor" value="red" />
      <Rectangle label="backgroundColor" value="green" />
      <Rectangle label="backgroundColor" value="blue" />
    </View>
  );
};

export default Page;

为什么这样改就对了 #

1. 当你在Page里写<Rectangle label="backgroundColor" value="red" />时，React会把这些属性打包成一个对象{ label: "backgroundColor", value: "red" }传递给Rectangle组件。
2. 用({ label, value })解构这个props对象，就能正确拿到你传递的两个属性值。
3. 这时候{[label]: value}就会变成{ backgroundColor: "red" }，和基础styles合并后，就能覆盖默认的绿色背景啦。

这样修改后，你就能看到红、绿、蓝三个不同颜色的方块了～

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