React native：无法添加没有 YogaNode 或父节点的子节点答案

【问题标题】：React native: Cannot add a child that doesn't have a YogaNode or parent nodeReact native：无法添加没有 YogaNode 或父节点的子节点
【发布时间】：2018-03-18 05:43:45
【问题描述】：

刚开始学习 react-native，

我创建了一个单独的文件 flexdemo.js 并创建了如下组件：

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>
                <View style={{ flex: 2, backgroundColor: "skyblue" }}> </View>
                <View style={{ flex: 3, backgroundColor: "steelblue" }}> </View>
            </View>

        );
    }
}

App.js 文件如下：

import React, { Component } from 'react';
import {
  AppRegistry,
  Platform,
  StyleSheet,
  Text,
  View, Image
} from 'react-native';

// import Bananas from './src/banana';
// import LotsOfStyles from './src/styledemo'

import FlexibleViews from './src/flexdemo';

export default class App extends Component {
  render() {
    return (
      // <Bananas name = "Tapan"/>
      <View>
        <FlexibleViews />
      </View>

    );
  }
}

这给了我这个错误：

现在，如果我尝试通过将 flexdemo.js 代码添加到 App.js 来运行代码，那么一切正常。

像这样更改了 App.js：

import React, { Component } from 'react';
import { AppRegistry, View } from 'react-native';

export default class FlexDimensionsBasics extends Component {
  render() {
    return (
      // Try removing the `flex: 1` on the parent View.
      // The parent will not have dimensions, so the children can't expand.
      // What if you add `height: 300` instead of `flex: 1`?
      <View style={{flex: 1}}>
        <View style={{flex: 1, backgroundColor: 'powderblue'}} />
        <View style={{flex: 2, backgroundColor: 'skyblue'}} />
        <View style={{flex: 3, backgroundColor: 'steelblue'}} />
      </View>
    );
  }
}

【问题讨论】：

尝试删除渲染函数中的 cmets
删除 render() 中的 cmets 解决了我的问题。谢谢克里斯

标签： react-native react-native-android

【解决方案1】：

移除组件内部的 cmets。

【讨论】：

我不知道。我被这个错误困扰了一整天，找不到任何文档。最后，当这对我有用时，我想在这里更新它，这样其他初学者可能不会浪费他的时间。我自己是初学者。
教程说它接收一些数据并将组件内的所有内容转换为 JSX 以显示输出。我一定只是忽略了 cmets 并试图从中找到一些意义。
我在文件中没有任何评论或任何//。
在打开根组件后我有一个备用的>。

【解决方案2】：

我想在这里给出一个更笼统的答案，因为the issue 返回相同的错误消息可能有多种原因。我见过最多的三个：

1.评论可能是原因。但不是删除 cmets make 他们工作：

在return()-part 中，变量需要被包裹在 {} 中，例如 {this.state.foo} 所以包装 cmets 工作正常......

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

...只要它们不是返回语句中的第一个或最后一个元素：

    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>surprisingly it does</Text>
      </View>
    );

不幸的是，这些陷阱并不总是会导致错误。有时他们工作。我想这取决于您使用的所有工具/库/组件中的哪一个以及它们在您的应用程序中的版本。

【讨论】：

这个错误就像我的妻子，它不会告诉我为什么生我的气。行号会很棒！
我发现（而不是空格）也会导致问题
我遇到了同样的错误，我的原因是 #2。添加了双重否定，它起作用了。谢谢。
#2 也是如此。救命稻草答案。
我遇到了这个错误，因为我在<Text> 和</Text> 之间放置了一个组件。更正以消除错误。

【解决方案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 添加到 App.js 文件中的 <View> 组件，要么（我猜这取决于您接下来的步骤）删除它并将您的<FlexibleViews> 渲染为根组件，因为它基本上是一个带有一些子组件的<View> 组件。

【讨论】：

是的，有时，这个问题是由你父母的空格引起的，我也因为空格而面临这个问题。
` 文本只允许在组件中使用`对我有帮助。谢谢。

【解决方案4】：

如果您的 render() 函数中有 if else 语句，请像这样使用 !!：

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

代替：

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

【讨论】：

【解决方案5】：

我降级了 react 原生版本，然后我得到了一个不同的错误，基本上是我在视图中有一个简单的字符串，如下所示：

<View>
    MyComponent
</View>

我必须用这样的文本组件来包装字符串：

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

希望对你有帮助

【讨论】：

【解决方案6】：

        <View style={{ flex: 1 }}>
            <Text style={{ flex: 1, backgroundColor: "powderblue" }}> </Text>
            <Text style={{ flex: 2, backgroundColor: "skyblue" }}> </Text>
            <Text style={{ flex: 3, backgroundColor: "steelblue" }}> </Text>
        </View>

使用组件层次结构应该被维护，例如所有组件，如Text，ListView，TextInput等都应该包装在父组件中，即View。让我们看看下面的例子：

正确
正文 >
确保所有组件标签都应该正确关闭。
确保从 react 原生布局组件和函数中删除不必要的分号。

https://www.skptricks.com/2018/08/react-native-cannot-add-child-that.html

【讨论】：

【解决方案7】：

此错误通常来自以下错误之一

删除不必要的 cmets 并从返回函数中删除 cmets。
检查正确的变量名。
检查意外的分号或任何错误的语法

【讨论】：

【解决方案8】：

删除返回块“//”中的注释当我不小心添加一个';'时，我遇到了同样的问题在返回块中，iOS 运行良好，但 Android 有此错误信息

【讨论】：

【解决方案9】：

在我的情况下，我的一个视图周围有小 () 括号，这导致了错误。

({renderProgress()})

删除小括号对我有用。

{renderProgress()}

【讨论】：

【解决方案10】：

在我的情况下，我的渲染函数中有一个导致评估为 0 的条件。

似乎 0 && 'some jsx' 在新版本的 react native 中中断。

错误示例：

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

虽然这应该是有效的 javascript 并且在 react 中工作，因为 0 是错误的，它在 react native 中崩溃，不知道为什么，但它可以通过一些重构工作：

工作示例：

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

【讨论】：

【解决方案11】：

在渲染方法时去掉分号

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

【讨论】：

【解决方案12】：

我刚刚遇到了同样的问题，并通过删除我在 android studio 中编辑项目时制作的 cmets 解决了这个问题，并且评论的快捷方式只是添加了 /* 和 */ 但实际上是为了反应原生的评论代码应该用花括号的开头和结尾括起来，例如以下将是无效注释：

/*<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>*/}

您会看到，将注释括在花括号中只有一个细微差别。

【讨论】：

【解决方案13】：

如果您的 render() return() 函数中有 cmets，也会发生此错误。渲染 JSX 时移除返回函数中的所有 cmets

【讨论】：

【解决方案14】：

就我而言，我在<Text> 标签中写了<TextInput>。下面是错误的。它会给孩子错误。

<text>
  <TextInput style={styles.textinput} 
        textcolor
          placeholder = 'user id'
          placeholderTextColor = 'gray'
   />
</Text>

解决方案。

 <Text> hello </Text>
 <TextInput style={styles.textinput} 
        textcolor
          placeholder = 'user id'
          placeholderTextColor = 'gray'
  />

你必须写单独的标签。

因此，您在另一个标签中写入的任何标签都可能出现此错误。

【讨论】：

欢迎来到 Stack Overflow！请注意，您正在回答一个非常古老且已经回答的问题。这是How to Answer 的指南。