React.Children.only react 요소 하위 항목만 수신할 것으로 예상됨React.Children.only react 요소 하위 항목만 수신할 것으로 예상됨그리고...그리고...

React.Children.only react 요소 하위 항목만 수신할 것으로 예상됨그리고...

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>element는 에러의 원인입니다.그<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>
    );
}

네, 실제로 당신의 몸 안에 아이가 하나 있어야 합니다.<TouchableHighlight>.

그리고, 만약 당신이 당신의 파일을 오염시키고 싶지 않다면Views리액트 프래그먼트를 사용하면 같은 결과를 얻을 수 있습니다.

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

또는 React Fragments에는 짧은 구문이 있습니다.따라서 위의 코드는 다음과 같이 작성할 수 있습니다.

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

같은 실수를 했어요 심지어 제가 한 아이만 낳았을 때도요TouchableHighlight문제는 다른 몇 명에게 코멘트를 남겼지만 잘못 전달했다는 것입니다.적절한 코멘트를 하고 있는 것을 확인해 주세요.

직후에TouchableWithoutFeedback또는<TouchableHighlight>를 삽입하다<View>이렇게 하면 이 오류가 발생하지 않습니다.@Pedram answer 또는 다른 답변이 충분한 이유를 알 수 있습니다.

저 같은 경우에는 요소를 한 줄만 내려놓으면 됩니다.

그러면 다음 오류가 발생합니다.

export function DismissKeyboard(props: IProps) {
  return <TouchableWithoutFeedback
    onPress={() => Keyboard.dismiss()}> {props.children}
  </TouchableWithoutFeedback>;
}

에러는 발생하지 않습니다만, 다음과 같습니다.

export function DismissKeyboard(props: IProps) {
  return <TouchableWithoutFeedback
    onPress={() => Keyboard.dismiss()}>
    {props.children}
  </TouchableWithoutFeedback>;
}

보통 Tochable Highlight에서 발생합니다.어쨌든 에러는 임의의 컴포넌트 내에서 단일 요소를 사용해야 함을 의미합니다.

해결 방법 : 부모 내부의 단일 뷰를 사용할 수 있으며 이 보기 내에서는 모든 뷰를 사용할 수 있습니다.첨부된 사진을 참조해 주세요.

여기에 이미지 설명 입력

1. <TouchableHighlight>요소는 내부에 한 명의 자식만 포함할 수 있습니다.
2. 이미지를 Import했는지 확인합니다.

사용하다TouchableHighlight에서react-native-gesture-handler'가 아니라 '입니다.react-native'

import { TouchableHighlight } from 'react-native-gesture-handler';

메뉴얼의 설명에는, 다음과 같이 기재되어 있습니다.

제스처 핸들러 라이브러리는 네이티브버튼에 기반한 RN의 터치 가능한 컴포넌트 구현을 제공하며 RN이 사용하는 JS 응답기 시스템에 의존하지 않습니다.터치 가능한 구현은 동일한 API를 따르며 React Native에서 사용할 수 있는 터치 가능한 대체품을 목표로 합니다.

https://docs.swmansion.com/react-native-gesture-handler/docs/api/components/touchables/

이 라이브러리는, https://github.com/software-mansion/react-native-gesture-handler 에서 인스톨 할 수 있습니다.

Touchable의 Import 명세서가 잘못되어 있을 수 있습니다.Feedback 미포함.

틀렸다: import { TouchableWithoutFeedback } from 'react-native'

정답: import { TouchableWithoutFeedback } from 'react-native-gesture-handler'

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