带有 styled-components parent prop 的 react-native

Question

我在我的 react-native 项目中使用 styled-components，我想知道如何从子元素中获取父 prop ..这是一个例子，我有 2 个 styled-components

const First = styled.View`
  display: flex;
  width: 50px;
  height: 50px;
  background-color: ${props => props.selected ? 'blue' : 'red'};
`
const Second = styled.Text`
  // here I want to check if First has the selected prop.
  color: ${props => props.selected ? '#fff' : '#000'};
`

和我自己的 React 组件

const Test = () = (
  <First selected>
    <Second>Test</Second>
  </First>
)

现在如何检查 Seconds 父亲(即 First)是否具有 selected 属性？ 我知道如果我将选定的属性赋予 Second 它将起作用，但这不是我想要实现的目标......必须有一种方法，因为它们嵌套，我试图控制台日志和props arg 但我无法在子对象返回的对象中找到父值。

谢谢

Answer 1

如果您想遵循 React 的模式，有一种方法。将相同的 Prop 传递给 <second> .

不过，您可以做的是像下面这样为 child 使用适当的 Prop

const Test = () = (
  <First selected>
    <Second isParentSelected={selected} >Test</Second>
  </First>
)

然后

const Second = styled.Text`
  color: ${props => props.isParentSelected ? '#fff' : '#000'};
`