퍼팅 할 때 오류 "React.Children.only 하나의 반작용 자식 요소를받을 것으로 예상"

퍼팅 할 때 오류 "React.Children.only 하나의 반작용 자식 요소를받을 것으로 예상" 하고 안에

---

내 React Native 코드에 다음과 같은 렌더링 방법이 있습니다.

render() {
    const {height, width} = Dimensions.get('window');
    return (
      <View style={styles.container}>
        <Image 
          style={{
            height:height,
            width:width,
          }}
          source={require('image!foo')}
          resizeMode='cover' 
        />
        <TouchableHighlight style={styles.button}/>
      </View>
    );
  }

그것은 나에게

React.Children.only는 단일 React 요소 자식을받을 것으로 예상됩니다.

오류. TouchableHighlight구성 요소를 제거하면 제대로 작동합니다. 반면에 이미지 구성 요소를 제거해도 여전히 오류가 발생합니다. 이 오류가 발생하는 이유를 알 수 없으며 <View>렌더링을 위해 내부에 둘 이상의 구성 요소를 가질 수 있어야합니다.
어떤 아이디어?

---

<TouchableHighlight>정확히 한 명의 아이 가 있어야하는 것 같습니다 . 문서에 따르면 하나의 자식 만 지원하고 둘 이상은에 래핑되어야 <View>하지만 적어도 하나의 자식이 있어야한다는 것은 아닙니다. 텍스트 / 이미지가없는 단순한 색상의 버튼을 원했기 때문에 아이를 추가 할 필요가 없다고 생각했습니다.

이를 나타 내기 위해 문서를 업데이트하려고합니다.

---

<TouchableHighlight>요소는 오류의 근원이다. <TouchableHighlight>요소는 자식 요소가 있어야합니다 .

다음과 같은 코드를 실행 해보십시오.

render() {
    const {height, width} = Dimensions.get('window');
    return (
        <View style={styles.container}>
            <Image 
                style={{
                    height:height,
                    width:width,
                }}
                source={require('image!foo')}
                resizeMode='cover' 
            />
            <TouchableHighlight style={styles.button}>
                <Text> This text is the target to be highlighted </Text>
            </TouchableHighlight>
        </View>
    );
}

---

.NET Framework 아래에 한 명의 자녀 만있는 경우에도 동일한 오류가 발생했습니다 TouchableHighlight. 문제는 내가 몇 명의 다른 사람들이 잘못 주석을 달았다는 것입니다. 적절하게 주석을 달고 있는지 확인하십시오. http://wesbos.com/react-jsx-comments/

---

Yes, indeed you need to have one child inside your <TouchableHighlight>.

And, If you don't want to pollute your file with Views you can use React Fragments to achieve the same.

<TouchableWithoutFeedback>
  <React.Fragment>
   ...
  </React.Fragment>
</TouchableWithoutFeedback>

or even better there is a short syntax for React Fragments. So the above code can be written as below:

<TouchableWithoutFeedback>
  <>
   ...
  </>
</TouchableWithoutFeedback>

---

just after TouchableWithoutFeedback or <TouchableHighlight> insert a <View> this way you won't get this error. why is that then @Pedram answer or other answers explains enough.

---

Usually it happen in TochableHighlight. Anyway error mean that you must used single element inside the whatever component.

Solution : You can use single view inside parent and anything can be used inside that View. See the attached picture

enter image description here

참고URL : https://stackoverflow.com/questions/39862145/react-children-only-expected-to-receive-a-single-react-element-child-error-whe