React Native中如何为孙组件设置自定义样式？

我有一个需要复用的组件，但有时希望对孙组件进行细微样式调整，例如让孙组件A显示绿色边框，孙组件B显示蓝色边框。以下是我的代码简化版：

function Parent() {
  const contentA = {
    text: "Hello",
    number: 10 
  }

  const contentB = {
    text: "Again",
    number: 15
  }

  return (
    <>
      <Child content={contentA} />
      <Child content={contentB} />
    </>
  )
}

// ---------------------------

function Child({ content }) {
  return (
    <View style={{ padding: 10, margin: 10, backgroundColor: "gray" }}>
      <Grandchild content={content} />
    </View>
  )
}

// ---------------------------

function Grandchild({ content }) {
  return (
    <View>
      <Text>{content.text}</Text>
      <Text>{content.number}</Text>
    </View>
  )
}

我在思考是否可以通过如下方式传递样式：

function Parent() {
  return (
    <>
      <Child extraStyle="{borderColor: \"Green\"}" />
      <Child extraStyle="{borderColor: \"Blue\"}" />
    </>
  )
}

// ---------------------------

function Child({ extraStyle }) {
  return (
    <Grandchild extraStyle={extraStyle} />
  )
}

// ---------------------------

function Grandchild({ extraStyle }) {
  return (
    <View style={extraStyle} />
  )
}

请问该实现方式是否可行，或是有更规范的方法在React Native中为孙组件设置自定义样式？

你的思路方向是对的，但现有写法存在错误，同时还有更规范的实现方式：

一、你的方案修正 #

你当前的写法里，<Child extraStyle="{borderColor: \"Green\"}" />传递的是字符串而非样式对象，这会导致样式失效。正确的写法应该直接传递对象：

// Parent里的正确写法
<Child extraStyle={{borderWidth: 1, borderColor: "green"}} />
<Child extraStyle={{borderWidth: 1, borderColor: "blue"}} />

另外，孙组件的View要注意合并基础样式和传入样式，避免覆盖原有样式：

// Grandchild的正确写法
function Grandchild({ content, extraStyle }) {
  const baseStyle = { padding: 5 };
  return (
    <View style={[baseStyle, extraStyle]}>
      <Text>{content.text}</Text>
      <Text>{content.number}</Text>
    </View>
  )
}

修正后这个方案是完全可行的，适合简单的、零散的样式调整。

二、更规范的实现方式 #

1. 明确命名的样式props传递 #

给样式props起更具语义的名字（比如grandchildCustomStyle），避免模糊的extraStyle，同时在孙组件中合并基础样式与自定义样式：

// Parent
function Parent() {
  return (
    <>
      <Child 
        content={contentA} 
        grandchildStyle={{borderWidth:1, borderColor:"green"}} 
      />
      <Child 
        content={contentB} 
        grandchildStyle={{borderWidth:1, borderColor:"blue"}} 
      />
    </>
  )
}

// Child
function Child({ content, grandchildStyle }) {
  return (
    <View style={{ padding:10, margin:10, backgroundColor:"gray" }}>
      <Grandchild content={content} customStyle={grandchildStyle} />
    </View>
  )
}

// Grandchild
const baseGrandchildStyle = { padding:5, borderRadius:4 };
function Grandchild({ content, customStyle }) {
  return (
    <View style={[baseGrandchildStyle, customStyle]}>
      <Text>{content.text}</Text>
      <Text>{content.number}</Text>
    </View>
  )
}

2. Context传递样式（避免props drilling） #

如果组件层级更深，或者需要给多个孙组件统一设置样式，用React Context可以避免层层传递props：

// 创建样式Context
import { createContext, useContext } from 'react';
const GrandchildStyleContext = createContext({});

// Parent
function Parent() {
  return (
    <>
      <GrandchildStyleContext.Provider value={{borderColor:"green"}}>
        <Child content={contentA} />
      </GrandchildStyleContext.Provider>
      <GrandchildStyleContext.Provider value={{borderColor:"blue"}}>
        <Child content={contentB} />
      </GrandchildStyleContext.Provider>
    </>
  )
}

// Child 无需传递样式props
function Child({ content }) {
  return (
    <View style={{ padding:10, margin:10, backgroundColor:"gray" }}>
      <Grandchild content={content} />
    </View>
  )
}

// Grandchild
function Grandchild({ content }) {
  const customStyle = useContext(GrandchildStyleContext);
  const baseStyle = { borderWidth:1, padding:5 };
  return (
    <View style={[baseStyle, customStyle]}>
      <Text>{content.text}</Text>
      <Text>{content.number}</Text>
    </View>
  )
}

3. 预定义样式变体 #

如果孙组件的样式调整是固定的几种类型（比如成功、主色调样式），可以定义变体主题，传递变体名称更简洁：

// 预定义样式变体
const grandchildVariants = {
  success: { borderColor:"green", backgroundColor:"#f0fdf4" },
  primary: { borderColor:"blue", backgroundColor:"#eff6ff" }
};

// Parent
function Parent() {
  return (
    <>
      <Child content={contentA} variant="success" />
      <Child content={contentB} variant="primary" />
    </>
  )
}

// Child
function Child({ content, variant }) {
  return (
    <View style={{ padding:10, margin:10, backgroundColor:"gray" }}>
      <Grandchild content={content} variant={variant} />
    </View>
  )
}

// Grandchild
function Grandchild({ content, variant }) {
  const baseStyle = { borderWidth:1, padding:5, borderRadius:4 };
  const variantStyle = grandchildVariants[variant] || {};
  return (
    <View style={[baseStyle, variantStyle]}>
      <Text>{content.text}</Text>
      <Text>{content.number}</Text>
    </View>
  )
}

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