反应本机 - "Objects are not valid as React child"

Question

问题

我正在尝试将我创建的功能组件导入到我的 React class 组件中，但我收到以下错误：

"Invariant Violation: Objects are not valid as a React child (found: object with keys {width, height, backgroundColor, textAlign, fontSize, alignSelf, color, margin, padding, borderRadius}). If you meant to render a collection of children, use an array instead."

我不明白为什么。我尝试将子组件更改为基于 class 的组件，但这没有帮助。我还注释掉了子组件中的样式表，但我仍然收到类似的错误：

"Invariant Violation: Objects are not valid as a React child (found: object with keys {}). If you meant to render a collection of children, use an array instead."

代码

父组件

import React, {Component} from 'react';
import {
  StyleSheet,
  View,
  Text,
  Image,
  TextInput,
  TouchableOpacity,
  TouchableWithoutFeedback,
  Linking,
  ScrollView
} from 'react-native';


import CustomTextInput from '../../Components/CustomTextInput/CustomTextInput';

export default class SignupScreen extends React.Component{
  constructor(props) {
    super();
    this.state = {
      ageConfirmed: false
    }
  }
  render(){
    return(
          <View style={styles.container}>
            <ScrollView
              contentContainerStyle={styles.scrollView}
              keyboardDismissMode={'on-drag'}
              pinchGestureEnabled={false}
            >
                <CustomTextInput>
                  autoCorrect={false}
                  autoFocus={true}
                  placeholder={'Fortnite username'}
                  placeholderTextColor={'white'}
                </CustomTextInput>
            </ScrollView>
          </View>
    )
  }
}


const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: 'white',
    alignItems: 'center'
  },
  scrollView: {
    flex: 1,
    backgroundColor: 'white',
    alignItems: 'center'
  }
})

子组件

import React from 'react';
import { TextInput, StyleSheet } from 'react-native';
import { windowWidth, windowHeight } from '../../Constants';

export default CustomTextInput = (
  onChangeText, 
  autoCorrect,
  autoFocus,
  placeholder,
  placeholderTextColor
  ) => {
  return (
    <TextInput>
      style={styles.CustomTextInput}
      {/* onChangeText={onChangeText} */}
      autoCorrect={autoCorrect}
      autoFocus={autoFocus}
      placeholder={placeholder}
      placeholderTextColor={placeholderTextColor}
    </TextInput>
  );
}

const styles = StyleSheet.create({
  CustomTextInput: {
    width: windowWidth*0.54,
    height: windowHeight*0.036,
    backgroundColor: 'blue',
    textAlign: 'center',
    fontSize: windowHeight*0.03,
    alignSelf: 'center',
    color: 'white',
    margin: windowHeight*0.01,
    padding: 0,
    borderRadius: windowHeight*0.015 //TODO: assess if this is the right way to calc radius
  }
});

Answer 1

子组件

import React from 'react';
import { TextInput, StyleSheet } from 'react-native';
import { windowWidth, windowHeight } from '../../Constants';

export default ({
  onChangeText, 
  autoCorrect,
  autoFocus,
  placeholder,
  placeholderTextColor
  }) => {
  return (
    <TextInput
      style={styles.CustomTextInput}
      autoCorrect={autoCorrect}
      autoFocus={autoFocus}
      placeholder={placeholder}
      placeholderTextColor={placeholderTextColor}
    />
  );
}
const styles = StyleSheet.create({
  CustomTextInput: {
    width: windowWidth*0.54,
    height: windowHeight*0.036,
    backgroundColor: 'blue',
    textAlign: 'center',
    fontSize: windowHeight*0.03,
    alignSelf: 'center',
    color: 'white',
    margin: windowHeight*0.01,
    padding: 0,
    borderRadius: windowHeight*0.015 //TODO: assess if this is the right way to calc radius
  }
});

Answer 2

两个文件中都有错字。您在标签内有组件属性，而它应该定义为标签的属性，如下所示：

<CustomTextInput
  autoCorrect={false}
  autoFocus={true}
  placeholder='Fortnite username'
  placeholderTextColor='white'
/>

<TextInput />也是如此。

反应本机 - "Objects are not valid as React child"

React Native - "Objects are not valid as React child"

object

reactjs

react-native

react-component