У меня есть следующий метод рендеринга в моем исходном коде React:
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, он отлично работает. С другой стороны, если я удалю компонент Image, он все равно даст эту ошибку. Я не могу понять, почему он будет давать эту ошибку, а <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>
);
}
У меня была такая же ошибка, даже когда у меня был только один ребенок под TouchableHighlight. Проблема заключалась в том, что я несколько других прокомментировал, но неправильно. Убедитесь, что вы правильно комментируете: http://wesbos.com/react-jsx-comments/
Да, действительно, в вашем <TouchableHighlight> должен быть один ребенок.
И, если вы не хотите загрязнять свой файл с помощью Views, вы можете использовать React Fragments, чтобы добиться того же.
<TouchableWithoutFeedback>
<React.Fragment>
...
</React.Fragment>
</TouchableWithoutFeedback>
или, что еще лучше, существует короткий синтаксис для фрагментов реакции. Таким образом, приведенный выше код может быть написан так:
<TouchableWithoutFeedback>
<>
...
</>
</TouchableWithoutFeedback>
сразу после TouchableWithoutFeedback или <TouchableHighlight> вставьте <View> таким образом, вы не получите эту ошибку. почему тогда @Pedram ответ или другие ответы объясняют достаточно.
Обычно это происходит в TochableHighlight. В любом случае ошибка означает, что вы должны использовать один элемент внутри любого компонента.
Решение: Вы можете использовать один вид внутри родителя, и все, что угодно, можно использовать внутри этого вида. Смотрите прикрепленное изображение