从多个组件传播道具

Question

我正在创建一个内部有 2 个其他组件的组件。我想为他们两个传播道具，这样我就可以为他们每个人使用道具。如何引导 style 道具？即

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}
    />
  )
}

Answer 1

我想这行得通

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}
    />
  )
}

Answer 2

您可以重命名键：

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}
    />
  )
}

从多个组件传播道具

Spread props from multiple components

javascript

reactjs

react-native

react-props