React Native 0.68中如何实现支持嵌套组件的自定义组件？

你要实现的这种支持嵌套子组件的自定义组件，核心是利用React的children属性——这是React传递嵌套内容的标准方式。你之前看到的this.props写法是类组件的实现方式，下面给你更符合当前开发习惯的函数组件实现方案：

函数组件实现代码 #

import React from 'react';
import { View, StyleSheet } from 'react-native';

const MyCustomComponent = ({ children }) => {
  return (
    <View style={styles.customContainer}>
      {/* 渲染所有嵌套的子组件 */}
      {children}
    </View>
  );
};

const styles = StyleSheet.create({
  customContainer: {
    // 根据需求自定义容器样式
    padding: 16,
    backgroundColor: '#f8f8f8',
    borderRadius: 10,
    shadowColor: '#000',
    shadowOffset: { width: 0, height: 2 },
    shadowOpacity: 0.1,
    shadowRadius: 4,
    elevation: 3, // Android 阴影
  },
});

export default MyCustomComponent;

使用示例 #

import MyCustomComponent from './MyCustomComponent';
import AnyNestedComponent from './AnyNestedComponent';

const App = () => {
  return (
    <MyCustomComponent>
      <AnyNestedComponent />
      {/* 支持同时嵌套多个组件 */}
      <View style={{ marginTop: 12 }}>
        <Text>这是额外嵌套的文本内容</Text>
      </View>
    </MyCustomComponent>
  );
};

补充说明 #

• 函数组件通过解构props直接获取children，然后在自定义的View容器内渲染它，就能实现你要的嵌套效果。
• 如果你之前接触的是类组件写法，这里也附上参考（但现在更推荐函数组件）：

import React, { Component } from 'react';
import { View, StyleSheet } from 'react-native';

class MyCustomComponent extends Component {
  render() {
    return (
      <View style={styles.customContainer}>
        {this.props.children}
      </View>
    );
  }
}

const styles = StyleSheet.create({
  customContainer: {
    padding: 16,
    backgroundColor: '#f8f8f8',
    borderRadius: 10,
  },
});

export default MyCustomComponent;

本质上不管类组件还是函数组件，都是依赖children属性来传递嵌套内容的，这是React的标准机制，没有其他替代方案。你觉得this.props的方法不是你想要的，应该是指类组件的写法，换成函数组件的解构方式就完全符合你的需求了。

内容的提问来源于stack exchange，提问作者holydragon