當與 TouchableWithoutFeedback 一起使用時，React Children 只希望收到一個 react child

Question

在我的應用程序中，我有一個文本輸入，我想隱藏鍵盤並在用戶單擊屏幕上的任意位置或關閉鍵盤時失去焦點。

我為此創建了這個函數：

interface DismissKeyBoardProps {
  children?: ReactNode
} 

const DismissKeyboard: React.FC<DismissKeyBoardProps> = ({ children }) => (
  <TouchableWithoutFeedback 
  onPress={() => Keyboard.dismiss()}> {children}
  </TouchableWithoutFeedback>
);

我像這樣使用上述方法：

const App: React.FC = () => {

  return (
    <>
      <StatusBar barStyle="dark-content" />
      <SafeAreaView>
        <Text> Test </Text>
        <DismissKeyboard>
          <TextInput placeHolder= {"place holder"}/>
        </DismissKeyboard>
      </SafeAreaView>
    </>
  );
}; 

但是，當我嘗試運行它時，我收到一個錯誤： React.children.only expected to receive a single React element child.

我不明白為什么會出現此錯誤，因為DismissKeyBooard確實只有一個孩子 - TextInput 。

編輯：我嘗試了類似的建議解決方案，但我不斷收到相同的錯誤。

  return (
    <View>
      <SafeAreaView>
        <>
          <DismissKeyboard>
            <TextInput style={{height: 40, borderColor: 'gray', borderWidth: 1}} placeHolder={"hint"}/>
          </DismissKeyboard>
        </>
      </SafeAreaView>
    </View>
  );

Answer 1

嘗試用<View>包裹你的孩子，我想它會幫助你。

const DismissKeyboard: React.FC<DismissKeyBoardProps> = ({ children }) => (
  <TouchableWithoutFeedback 
  onPress={() => Keyboard.dismiss()}> 
   <View>
    {children}
   </View>
  </TouchableWithoutFeedback>
);