加入收藏 | 设为首页 | 会员中心 | 我要投稿 李大同 (https://www.lidatong.com.cn/)- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置: 首页 > 百科 > 正文

reactjs – 在apollo客户端呈现组件中导致“React.Children.only

发布时间:2020-12-15 20:12:55 所属栏目:百科 来源:网络整理
导读:为什么在视图中添加另一个第二个元素会导致错误“React.Children.only期望接收一个React元素子元素”. 我有一个react本机组件,它使用apollo客户端调用graphQL端点来获取数据.如果我只渲染视图,它就可以工作,但是当我添加可触摸的高光时,我会得到错误.我可以
为什么在视图中添加另一个第二个元素会导致错误“React.Children.only期望接收一个React元素子元素”.

我有一个react本机组件,它使用apollo客户端调用graphQL端点来获取数据.如果我只渲染视图,它就可以工作,但是当我添加可触摸的高光时,我会得到错误.我可以在视图中没有多个根元素,还是使用复合元素创建视图?我尝试将其添加为Button,这也引发了不同的错误.然而,添加文本似乎没问题.

class Games extends Component {

  constructor(props) {
    super(props);
  }

  render() {
    const { loading,allGames } = this.props.data;

    if (loading) {
      return <Text>Loading</Text>;
    } else if (allGames) {
      return (
        <View style={styles.outer}>

          //adding this touchable highlight causes the error
          <TouchableHighlight>Get More</TouchableHighlight>

          { allGames.map(game => (
            <View key={game.id} style={styles.wrapper}>
              <Text style={styles.header}>{game.title}</Text>
            </View>
          ))}
        </View>
      );
    }

    return (
      <Text>No results</Text>
    );
  }
}
Games.propTypes = {
  data: PropTypes.shape({
    loading: PropTypes.bool.isRequired,allGames: PropTypes.array,}).isRequired,};

解决方法

根据 https://facebook.github.io/react-native/docs/touchablehighlight.html,

TouchableHighlight必须有一个孩子(不是零或多于一个).您可以尝试添加子元素.

<TouchableHighlight>
  <Text>Get More</Text>
</TouchableHighlight>

(编辑:李大同)

【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!

    推荐文章
      热点阅读