Question

我创建了一些组件。其中之一应该允许嵌套，但是却莫名其妙地不允许嵌套（莫名其妙，因为我找不到任何与此问题有关的帖子）

运行此文件需要一张图片（可以替换为任何图片）

import React, {Component} from 'react';
import PropTypes from 'prop-types';
import { View, StatusBar, StyleSheet, ImageBackground } from 'react-native';

export class PhonyStatusBar extends Component {
  render () {
    return (
        <View style={styles.statusBar} />
    );
  }
}

export class HomeScreen extends Component {
  static propTypes = {
      children: PropTypes.string
  }

  render () {
      return (
        <View>
            {this.props.children}
        </View>
      );
  }
}

export class AppGrid extends Component {
  render () {
    return (
      <View />
    );
  }
}

export default class App extends Component {
  render() {
    return (
      <View>
        {/* hide system status bar */}
        <StatusBar hidden={true} />
        <PhonyStatusBar />

        {/* throw in our own status bar  */}
        <HomeScreen> 
          <View />
        </HomeScreen>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  backgroundImage: {
      width:'100%',
      height:'100%',
  },
  statusBar: {
    width: '100%',
    height: 25.33,
    backgroundColor: 'rgba(255, 157, 0, 0.5)'
  },
});

Answer 1

In react children是一个内置的prop，已由库为组件定义。这不是您应该手动定义的道具。详情请参见：https://reactjs.org/docs/jsx-in-depth.html#children-in-jsx

尝试删除：

 static propTypes = {
      children: PropTypes.string
  }

来自HomeScreen，以解决此问题。

React Native-无效的道具孩子

1 个答案: