React Native - Как мы узнаем, какой дочерний элемент содержится в parent? - PullRequest
Новая
       56

React Native - Как мы узнаем, какой дочерний элемент содержится в parent?

1 голос
/ 16 марта 2020

Я создаю простой пользовательский компонент, который устанавливает динамические c высоту и ширину в тексте. 

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> или нет, есть предложения?

Ответы [ 2 ]

2 голосов
/ 16 марта 2020

Если имеется несколько элементов, children, передаваемый реквизитами, на самом деле является массивом , 

children:  

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

Если вы расположите дочерние элементы, как показано ниже, и структура будет фиксированной. 

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

Вы можете просмотреть массив потомков детей с помощью (с необязательной цепочкой возможно) 

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

, что означает, что в вашей ситуации вы можете проверить длина его или соответствие типа второго элемента Text, чтобы узнать, был ли передан компонент Text или нет.

Попробуйте онлайн:

Edit nervous-monad-jfkhz

Обновление

Если мы хотим получить полный обзор дочерних элементов, консоль без атрибута type будет хорошей. 

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

type: "div"
key: null
ref: null
props: Object
_owner: FiberNode
_store: Object
0 голосов
/ 16 марта 2020

Когда мы передаем опору как дети, то дети могут быть любым React.Node, который затрудняет идентификацию, что такое дети, а также не является надежным. Проверка children.props.children [1] .type не является надежной, поскольку она может не сработать, если кто-то изменит структуру дочерних элементов.

В вашем случае нам нужно заставить CustomComponent принимать два реквизита:

1-изображение

2-текст

и сделать его обнуляемым для любого не требуется. Тогда в вашем customComponent мы можем получить доступ к фактическому изображению и текстовому компоненту. Если вы хотите получить доступ к HTMLElement, а не к узлу, вы можете передать ref компоненту изображения и текста, а затем получить доступ к текущему значению в CustomComponent

Пример: функциональный компонент со встроенными подпорками 

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

Тогда Вы используете это так 

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