React.js中如何获取组件嵌套文本内容？不使用props实现

不同前端框架都有原生支持的内置机制来实现这个需求，不用手动定义props，直接获取组件标签包裹的内容：

React 实现 #

React 会自动将组件标签之间的内容作为 children 属性传递给组件，你可以直接在组件内部使用这个内置属性：

// 组件定义
function MyComponent({ children }) {
  // 直接使用children，这里就是传入的'my text'
  return <div>渲染的内容：{children}</div>;
}

// 调用组件
<MyComponent>'my text'</MyComponent>

这里的 children 是 React 内置的特殊属性，不需要你手动在 props 里声明，框架会自动处理标签间的内容传递。

Vue 实现 #

Vue 用**默认插槽（Default Slot）**来处理这种嵌套内容，无需 props，直接在组件模板里用 <slot> 标签接收：

Vue 3（组合式API） #

<!-- MyComponent.vue -->
<template>
  <div>
    <!-- 渲染传入的文本内容 -->
    <slot></slot>
  </div>
</template>

<script setup>
// 不需要额外逻辑，插槽内容自动传入
</script>

调用组件：

<MyComponent>'my text'</MyComponent>

Vue 2（选项式API） #

逻辑和Vue3一致，只是写法略有不同：

<template>
  <div>
    <slot></slot>
  </div>
</template>

<script>
export default {
  // 无需额外配置
}
</script>

核心原理 #

这种方式本质是利用框架原生的内容分发机制，不是通过自定义props传递数据，而是框架自动将组件标签包裹的内容注入到组件内部的对应位置（React的children、Vue的插槽）。

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