React HOC是否可在同一文件调用多个组件传不同数据及示例咨询

完全可以在同一个文件中多次调用同一个HOC包裹组件并传递不同数据，每个被HOC生成的新组件都是独立实例，内部状态互不干扰。

以下是基于你提供的HOC扩展的完整可运行示例：

import React from 'react';
import { useState } from 'react';

// 你编写的高阶组件 无修改
const WrapperComponent = (Component) => {
    const Container = (props) => {
        const [x, setX] = useState(5)
       
        return (
           <Component {...props} x={x} />
         )
    }
    return Container
}

// 基础展示组件1：用户卡片
const UserCard = (props) => {
  return (
    <div style={{border: '1px solid #ccc', padding: '10px', margin: '10px 0'}}>
      <h3>用户卡片</h3>
      <p>传入的用户名：{props.username}</p>
      <p>HOC注入的状态x：{props.x}</p>
      <button onClick={() => setX(prev => prev + 1)}>点击x+1</button>
    </div>
  )
}

// 基础展示组件2：商品卡片
const GoodsCard = (props) => {
  return (
    <div style={{border: '1px solid blue', padding: '10px', margin: '10px 0'}}>
      <h3>商品卡片</h3>
      <p>传入的商品名：{props.goodsName}</p>
      <p>传入的价格：{props.price}</p>
      <p>HOC注入的状态x：{props.x}</p>
      <button onClick={() => setX(prev => prev + 1)}>点击x+1</button>
    </div>
  )
}

// 用HOC分别包裹两个基础组件，得到独立的新组件
const WrappedUserCard = WrapperComponent(UserCard)
const WrappedGoodsCard = WrapperComponent(GoodsCard)

// 同一个父组件中调用，传入不同数据
function App() {
  return (
    <div className="App">
      <WrappedUserCard username="张三" />
      <WrappedGoodsCard goodsName="机械键盘" price={299} />
      {/* 同一个被包裹组件也可多次渲染，传入不同参数，状态独立 */}
      <WrappedUserCard username="李四" />
    </div>
  )
}

export default App;

补充说明 #

• 每个被WrapperComponent生成的组件都有独立的x状态，点击任意组件的x+1按钮，只会修改当前组件的x值，不会影响其他组件
• 调用被包裹组件时传入的自定义属性，会通过HOC里的{...props}透传给原始基础组件，可根据需求任意传递不同数据
• 即使是同一个被包裹组件多次渲染，各自的状态和传入的属性也完全独立，互不影响

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