React native: нельзя добавить дочернего, у которого нет YogaNode или родителя node

Ответ 1

Удалить комментарии внутри компонента.

Ответ 2

Я хочу дать более общий ответ здесь, потому что может быть несколько причин, по которым проблема возвращает одно и то же сообщение об ошибке. Три, которые я видел больше всего:

1. Комментарии могут быть причиной. Но вместо удаления комментариев заставьте их работать:

В return() -part переменные должны быть обернуты в {} как {this.state.foo} поэтому обертывание комментариев работает нормально...

    return(
        <Text> This works {/* it really does */}</Text>
    );

... если они не являются первым или последним элементом в операторе return:

    return(
      {/* This fails */}
      <Text> because the comment is in the beginning or end </Text>
      {/* This also fails */}
    );

2. Условный рендеринг может быть причиной. Если myCheck не определен или пустая строка, это может завершиться ошибкой:

    const myCheck = ""; /* or const myCheck = undefined */
    return(
      {myCheck && <MyComponent />}
    );

но добавляя двойное отрицание !! работает:

    const myCheck = ""; /* or const myCheck = undefined */
    return(
      {!!myCheck && <MyComponent />}
    );

3. Пробелы (или фактически любые строки) внутри компонента могут вызвать это, если не в <Text> -Component:

Текст в представлении, например:

    /* This fails */
    return(
      <View>it really does</View>
    );

Но также крошечное пространство между двумя компонентами:

    /* <View>*Space*<Text> fails: */
    return(
      <View> <Text>it really does</Text> </View>
    );

Но работает, если в новой строке:

    return(
      <View>
        {/* This works */}
        <Text>surpisingly it does</Text>
      </View>
    );

К сожалению, эти подводные камни не всегда приводят к ошибкам. Иногда они работают. Я предполагаю, что это зависит от того, какой из множества инструментов/либрий/компонентов вы используете, и их версий в вашем приложении.

Ответ 3

Я смог воспроизвести проблему с кодом, который вы предоставили. Решение двоякое:

• В файле flexdemo.js вы должны удалить пробелы из тегов <View>. Они рассматриваются как текст, а текст разрешается только внутри компонента <Text>. Я бы рекомендовал сделать ваши теги <View> закрытыми, пока у них не будет контента, чтобы избежать этого вопроса в будущем, например:

  import React, { Component } from 'react';
  import { View } from 'react-native';
  
  export default class FlexibleViews extends Component {
    render() {
      return (
        <View style={{ flex: 1 }}>
          <View style={{ flex: 1, backgroundColor: 'powderblue' }} />
          <View style={{ flex: 2, backgroundColor: 'skyblue' }} />
          <View style={{ flex: 3, backgroundColor: 'steelblue' }} />
        </View>
      );
    }
  }
  

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

• Чтобы отобразить ваши синие оттенки синего цвета, вам нужно будет добавить flex в компонент <View> в файле App.js или (в зависимости от того, какие ваши последующие шаги, я думаю), удалите его и превратите ваш <FlexibleViews> в качестве корневого компонента, так как в любом случае это компонент <View> с некоторыми дочерними элементами.

Ответ 4

Я отказываюсь от ответа на собственную версию, тогда у меня другая ошибка, в основном то, что у меня была простая строка в представлении, примерно так:

<View>
    MyComponent
</View>

Мне пришлось обернуть строку текстовым компонентом следующим образом:

<View>
    <Text>MyComponent</Text>
</View>

надеюсь, что поможет

Ответ 5

Если у вас есть оператор if else в вашей функции render() используйте !! как это:

{!! (this.state.your_state) &&
   <View>
        <Text>Your Text</Text>
   </View>
}

вместо:

{(this.state.your_state) &&
    <View>
         <Text>Your Text</Text>
    </View>
}

Ответ 6

Эта ошибка обычно возникает из одной из следующих ошибок:

• Удалите ненужные комментарии и удалите комментарии из функции возврата.
• проверьте правильное имя переменной.
• проверить непреднамеренную точку с запятой или любой неправильный синтаксис

Ответ 7

Удалить комментарий в блоке возврата "//" Я столкнулся с той же проблемой, когда случайно добавил ';' в обратном блоке iOS работает хорошо, но в Android есть эта информация об ошибке

Ответ 8

Удалить точку с запятой при рендеринге метода в

<View style={styles.container}> {this.renderInitialView()}//semi-color should not be here </View>

Ответ 9

Я столкнулся с той же проблемой только сейчас и решил ее, удалив комментарии, которые я сделал при редактировании проекта в Android Studio, и там ярлык комментария просто добавляет /* и */, но на самом деле для реакции на натив закомментированный код должен быть включен с начальными и конечными фигурными скобками, например, следующий будет недопустимым комментарием:

/*<Text style={styles.pTop}>
 {
    this.state.response.map((index, value) => {
    return index.title;
    })
 }
 </Text>*/

И следующее будет правильным:

{/*<Text style={styles.pTop}>
 {
    this.state.response.map((index, value) => {
    return index.title;
    })
 }
 </Text>*/}

Вы видите, что есть только одна небольшая разница заключая комментарий в фигурные скобки.

Ответ 10

Эта ошибка также возникает, если у вас есть комментарии в вашей функции render() return(). Удалите все комментарии в вашей функции возврата при рендеринге JSX

Ответ 11

В моем случае у меня были маленькие() скобки вокруг одного из моих представлений, что вызывало ошибку.

({renderProgress()})

Снятие маленьких скобок сработало для меня.

{renderProgress()}

Ответ 12

В моем случае у меня было условие в моей функции рендеринга, которое привело к оценке 0.

Кажется, что 0 && 'some jsx' разрывается в более новых версиях реагировать на нативную.

Пример ошибки:

render(){
   return <View>
              {this.state.someArray.length && <View>...</View>}
      </View>
}

Хотя это должен быть действительный javascript и он работает в реагировать, так как 0 является ошибочным, он аварийно завершает работу в реагирующем нативе, не знаю почему, но он работает с небольшим рефакторингом, как:

Рабочий пример:

render(){
   return <View>
              {this.state.someArray && this.state.someArray.length> 0 && 
              <View>...</View>}
          </View>
}