如何实现组件复用？需在Idea组件中展示Factor组件全部数据

根据主流前端框架，分别提供具体实现方式：

React 场景下的实现方式 #

1. 通过 props 传递数据 #

将Factor组件设计为纯展示型组件，依赖外部传入的数据渲染。在Idea组件中获取Factor所需数据后，直接复用Factor组件并传递数据。

• 代码示例：

  // Factor.jsx
  export const Factor = ({ data }) => {
    return (
      <div className="factor-container">
        {data.map(item => (
          <div key={item.id} className="factor-item">
            <span>{item.name}</span>
            <p>{item.description}</p>
          </div>
        ))}
      </div>
    );
  };
  
  // Idea.jsx
  import { Factor } from './Factor';
  
  export const Idea = () => {
    // 从API/状态管理中获取Factor数据
    const factorData = [
      { id: 1, name: '因子A', description: '这是因子A的描述' },
      { id: 2, name: '因子B', description: '这是因子B的描述' }
    ];
  
    return (
      <div className="idea-container">
        <h2>Idea内容</h2>
        <div className="idea-factor-section">
          <h3>关联因子数据</h3>
          {/* 直接复用Factor组件 */}
          <Factor data={factorData} />
        </div>
      </div>
    );
  };
  

2. 用自定义 Hook 复用数据逻辑 #

如果Factor组件包含数据获取逻辑，可将这部分逻辑抽离为自定义Hook，在Idea组件中调用Hook获取数据，既可以复用Factor组件，也可以直接用数据自行渲染。

• 代码示例：

  // useFactorData.js
  import { useState, useEffect } from 'react';
  
  export const useFactorData = () => {
    const [data, setData] = useState([]);
    const [loading, setLoading] = useState(true);
  
    useEffect(() => {
      // 模拟API请求
      fetch('/api/factors')
        .then(res => res.json())
        .then(resData => {
          setData(resData);
          setLoading(false);
        });
    }, []);
  
    return { data, loading };
  };
  
  // Factor.jsx
  import { useFactorData } from './useFactorData';
  
  export const Factor = () => {
    const { data, loading } = useFactorData();
    if (loading) return <div>加载中...</div>;
    return (
      <div className="factor-container">
        {data.map(item => (
          <div key={item.id} className="factor-item">
            <span>{item.name}</span>
            <p>{item.description}</p>
          </div>
        ))}
      </div>
    );
  };
  
  // Idea.jsx
  import { Factor } from './Factor';
  import { useFactorData } from './useFactorData';
  
  export const Idea = () => {
    const { data, loading } = useFactorData();
    return (
      <div className="idea-container">
        <h2>Idea内容</h2>
        <div className="idea-factor-section">
          <h3>关联因子数据</h3>
          {/* 方式一：直接复用Factor组件 */}
          <Factor />
          {/* 方式二：用Hook数据自行渲染 */}
          {loading ? <div>加载中...</div> : (
            <div className="factor-container">
              {data.map(item => (
                <div key={item.id} className="factor-item">
                  <span>{item.name}</span>
                  <p>{item.description}</p>
                </div>
              ))}
            </div>
          )}
        </div>
      </div>
    );
  };
  

Vue 场景下的实现方式 #

1. 通过 props 传递数据 #

将Factor组件定义为接收数据的展示组件，在Idea组件中获取数据后传递给Factor组件渲染。

• 代码示例（Vue 3 组合式API）：

  <!-- Factor.vue -->
  <template>
    <div class="factor-container">
      <div v-for="item in data" :key="item.id" class="factor-item">
        <span>{{ item.name }}</span>
        <p>{{ item.description }}</p>
      </div>
    </div>
  </template>
  
  <script setup>
  defineProps({
    data: {
      type: Array,
      required: true,
      default: () => []
    }
  });
  </script>
  
  <!-- Idea.vue -->
  <template>
    <div class="idea-container">
      <h2>Idea内容</h2>
      <div class="idea-factor-section">
        <h3>关联因子数据</h3>
        <Factor :data="factorData" />
      </div>
    </div>
  </template>
  
  <script setup>
  import Factor from './Factor.vue';
  import { ref, onMounted } from 'vue';
  
  const factorData = ref([]);
  
  onMounted(async () => {
    // 模拟API请求获取数据
    const res = await fetch('/api/factors');
    factorData.value = await res.json();
  });
  </script>
  

2. 用组合式函数复用数据逻辑 #

把Factor组件的数据获取、处理逻辑抽成组合式函数，在Factor和Idea组件中共享使用，实现数据逻辑的复用。

• 代码示例：

  // useFactorData.js
  import { ref, onMounted } from 'vue';
  
  export function useFactorData() {
    const data = ref([]);
    const loading = ref(true);
  
    const fetchData = async () => {
      const res = await fetch('/api/factors');
      data.value = await res.json();
      loading.value = false;
    };
  
    onMounted(fetchData);
  
    return { data, loading, fetchData };
  }
  

  <!-- Factor.vue -->
  <template>
    <div v-if="loading" class="loading">加载中...</div>
    <div v-else class="factor-container">
      <div v-for="item in data" :key="item.id" class="factor-item">
        <span>{{ item.name }}</span>
        <p>{{ item.description }}</p>
      </div>
    </div>
  </template>
  
  <script setup>
  import { useFactorData } from './useFactorData';
  const { data, loading } = useFactorData();
  </script>
  

  <!-- Idea.vue -->
  <template>
    <div class="idea-container">
      <h2>Idea内容</h2>
      <div class="idea-factor-section">
        <h3>关联因子数据</h3>
        <!-- 方式一：直接复用Factor组件 -->
        <Factor />
        <!-- 方式二：用组合式函数数据自行渲染 -->
        <div v-if="loading" class="loading">加载中...</div>
        <div v-else class="factor-container">
          <div v-for="item in data" :key="item.id" class="factor-item">
            <span>{{ item.name }}</span>
            <p>{{ item.description }}</p>
          </div>
        </div>
      </div>
    </div>
  </template>
  
  <script setup>
  import Factor from './Factor.vue';
  import { useFactorData } from './useFactorData';
  const { data, loading } = useFactorData();
  </script>
  

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