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> (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |