Question

我在反应原生项目中使用样式组件，我想知道如何从子元素中获取父道具..这是一个例子，我是2个样式组件< / p>

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道具？我知道如果我将选定的attr提供给Second它会起作用但它不是我想要实现的......必须有一种方法，因为它们嵌套，我试图控制日志和道具arg，但我无法找到孩子返回的对象中的父值。

感谢

Answer 1

如果你想遵循React的模式，有一种方法。将同一道具传递给<second>。

你可以做的是，对孩子使用适当的道具，如下所示

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

然后

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

Answer 2

如果您真的需要这种行为，您可以按照以下方式在父母内部设置孩子的样式，但是Matthew的答案是首选方式：

var interval = '';
if (request.action == 'start') {
   interval = setInterval(function() {
        $(document).scrollTop($(document).height());
   },1000);
}
 else if (request.action == 'end'){
   // code to stop previous process
   clearInterval(interval);
}

或者，您可以使用import styled from "styled-components"; const Second = styled.Text`...`; const First = styled.View` display: flex; width: 50px; height: 50px; background-color: ${props => props.selected ? 'blue' : 'red'}; ${Second} { color: ${props => props.selected ? '#fff' : '#000'}; } `函数将所有新样式包装在块中：

css

与样式组件父道具反应原生

2 个答案: