Javascript 从多个组件传播道具

我正在创建一个包含两个其他组件的组件。我想为他们传播道具，这样我就可以为他们每个人使用道具。如何引导

样式

道具？i、 e

import FirstComponent from '../components'
import SecondComponent from '../components'

function SimpleButton (props) {
  return (
    <FirstComponent
      {...props}
    >
      <SecondComponent
        {...props}
      />
    </FirstComponent>
  )
}

function HomeScreen () {
  return (
    <SimpleButton
      style={this is the style for FirstComponent}
      style={this is the style for SecondComponent}
    />
  )
}

从“../components”导入第一个组件
从“../components”导入第二个组件
功能简单按钮（道具）{
返回(
)
}
功能主屏幕（）{
返回(
)
}

我想这是可行的

function SimpleButton (props) {
  return (
    <FirstComponent
      style={props.FirstComponentStyle}
      {...props}
    >
      <SecondComponent
        style={props.SecondComponentStyle}
        {...props}
      />
    </FirstComponent>
  )
}

function HomeScreen () {
  return (
    <SimpleButton
      FirstComponentStyle={this is the style for FirstComponent}
      SecondComponentStyle={this is the style for SecondComponent}
    />
  )
}

功能简单按钮（道具）{
返回(
)
}
功能主屏幕（）{
返回(
)
}

您可以重命名密钥：

function SimpleButton (props) {
  return (
    <FirstComponent
      {...props, style: props.firstComponentStyle}
    >
      <SecondComponent
        {...props, style: props.firstComponentStyle}
      />
    </FirstComponent>
  )
}

function HomeScreen () {
  return (
    <SimpleButton
      firstComponentStyle={this is the style for FirstComponent}
      secondComponentStyle={this is the style for SecondComponent}
    />
  )
}

功能简单按钮（道具）{
返回(
)
}
功能主屏幕（）{
返回(
)
}

在代码

返回中，我建议将样式放在道具排列之后。否则，当您将其展开时，它将立即被覆盖。非常感谢！