React Native - 我们如何知道父元素包含哪些子元素？

Question

我正在创建一个简单的自定义组件，它将在文本中设置动态高度和宽度。

Class CustomComponent extends React.Component{
  render(){
    if(this.props.children){
      if(this.state.isLoading){
        console.log(this.props.children)

        //Here i want to know what JSX is passing

        return(
          <View>
            <ActivityIndicator size={'large'}/>
          </View>
        )
      }
      return(
        <ImageBackground
          source={this.props.source}
        >
          {this.props.children}
        </ImageBackground>
      )
    } else if(this.state.isLoading){
      return(
        <View>
          <ActivityIndicator size={'large'}/>
        </View>
      )
    } else return(
      <Image
        source={this.props.source}
      />
    )
  }
}

//Use with text
<CustomComponent>
  <View>
    <Image {passing image} />
    <Text>Sample</Text>
  </View>
</CustomComponent>

但是现在我需要处理 children 是否仅通过 <Images/> 和 <Text>，有什么建议吗？

Answer 1

如果有多个元素，props传过来的children其实是一个数组，

children:  

[0]: <Image {passing image} />
[1]: <Text>Sample</Text>

如果像下面这样排列 child 个元素并且结构固定。

  <View>
    <Image {passing image} />
    <Text>Sample</Text>
  </View>

你可以访问 children 的 children 数组通过（也许 optional chaining）

this.props.children.props.children[1].type === 'Text'

这意味着在你的情况下，你可以检查它的长度，或者第二个元素的类型是否适合Text，以确定Text组件通过与否

在线试用：

更新

如果我们想要 children 的完整视图，没有属性 type 的控制台会很好。

this.props.children.props.children[1]

type: "div"
key: null
ref: null
props: Object
_owner: FiberNode
_store: Object

Answer 2

当我们将 prop 作为 children 传递时，children 可以是任何 React.Node，这使得很难确定 children 到底是什么，也不可靠。检查 children.props.children[1].type 是不可靠的，因为如果有人重新排序 children 的结构，它可能无法工作。

在您的情况下，我们需要让 CustomComponent 接受两个道具：

1- 图片

2- 文字

并使其对于任何不需要的都可以为空。然后在您的 customComponent 中，我们可以访问实际的图像和文本组件。如果您想访问 HTMLElement 而不是节点，您可以将 ref 传递给图像和文本组件，然后您可以访问 CustomComponent

中的当前值

示例：具有内联 props 的功能组件

const CustomComponent = ({ image, text }) => {
 if (image !== null) {
    ...
 }
 if (text !== null) {
    ...
 }
 return (
   <View>
    {image}
    {text}
   </View>
 )
}

那你就这样用

 <CustomComponent 
  image={<Image src='' />}
  text={<Text>Sample</Text>} 
 />

React Native - 我们如何知道父元素包含哪些子元素？

React Native - How do we know what child element is contained by parent?

javascript

dom

custom-component

reactjs

react-native

更新