React Native：如何传递flex属性值至可复用组件并设置为CSS样式？

我来帮你搞定这个问题！你遇到的错误根源在于直接修改了不可变的样式对象——通常我们会把基础样式定义为const常量，直接给它添加或修改属性会触发不可变对象的报错，而且这也不符合React组件的纯净性原则。

错误写法示例（为什么会报错） #

假设你之前的代码是这样的：

// 基础样式被定义为const常量，不可直接修改
const styles = {
  cardSection: {
    padding: 12,
    borderBottom: '1px solid #eee'
  }
};

function CardSection({ flex }) {
  // 这里直接修改styles.cardSection的flex属性，会触发不可变对象错误
  styles.cardSection.flex = flex;
  return <div style={styles.cardSection}>...</div>;
}

正确解决方案：创建新的样式对象 #

我们需要通过**扩展运算符...**或者Object.assign来合并基础样式和传入的flex属性，生成一个全新的样式对象，而不是修改原有的基础样式。

方案1：使用扩展运算符（推荐）

// 定义基础样式常量
const baseCardStyles = {
  padding: 12,
  borderBottom: '1px solid #eee'
};

function CardSection({ flex }) {
  // 合并基础样式和flex属性，生成新对象
  const sectionStyles = {
    ...baseCardStyles,
    flex: flex
  };

  return <div style={sectionStyles}>...</div>;
}

方案2：直接在JSX中合并样式

如果组件逻辑简单，也可以直接在style属性里完成合并：

function CardSection({ flex }) {
  return (
    <div 
      style={{
        padding: 12,
        borderBottom: '1px solid #eee',
        flex: flex
      }}
    >
      ...
    </div>
  );
}

方案3：添加默认值（可选）

如果flex是可选属性，可以给它设置默认值，避免未传值时样式异常：

function CardSection({ flex = '1' }) {
  const sectionStyles = {
    ...baseCardStyles,
    flex: flex
  };
  return <div style={sectionStyles}>...</div>;
}

为什么这样可行？ #

扩展运算符和Object.assign都会创建一个新的对象，不会修改原有的基础样式常量，既遵守了不可变对象的规则，也保证了组件每次渲染时样式都是独立的，避免了不同组件实例之间的样式污染。

现在你就可以正常使用<CardSection flex='1' />和<CardSection flex='3' />来设置不同的flex值啦！

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