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

【问题标题】：React Native - How do we know what child element is contained by parent?React Native - 我们如何知道父元素包含哪些子元素？
【发布时间】：2020-06-27 04:59:50
【问题描述】：

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

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>，有什么建议吗？

【问题讨论】：

标签： javascript reactjs react-native dom custom-component

【解决方案1】：

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

children:  

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

如果你像下面这样排列子元素并且结构是固定的。

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

您可以通过（可能是optional chaining）访问孩子的孩子数组

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

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

在线试用：

更新

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

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

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

【讨论】：

实际上我想从我的CustomComponent 中传递的孩子那里获得完整的 JSX，所以在上述情况下，我想在我的CustomComponent 中控制台<Text>Sample</Text>，这可能吗？
@flix 我认为这与问题标题无关，您可以根据此答案使用ref 或createElement 来实现这一目标
@flix 你的意思<Text>Sample</Text>和children是一样的，只是格式不同，请查看相关文档reactjs.org/docs/introducing-jsx.html

【解决方案2】：

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

在您的情况下，我们需要让 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>} 
 />

【讨论】：