reactjs - 是什么导致在Apollo客户端呈现的组件中出现 “React.Children.only expected to receive a single React element child.”错误

为什么在 View 中添加另一个第二个元素会导致错误"React.Children.only expected to receive a single React element child."
我有一个 react native 组件，正在使用apollo客户端调用graphQL端点来获取数据。如果我只渲染一个 View ，它就可以工作，但是当我添加可触摸的高光时，我得到了错误。一个 View 中是否可以包含多个根元素，或者使它成为包含复合元素的 View ？我尝试将其添加为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必须有一个 child (不能为零或多个)。您可以尝试添加子元素。

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

关于reactjs - 是什么导致在Apollo客户端呈现的组件中出现 “React.Children.only expected to receive a single React element child.”错误，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/40683168/