React中如何将组件作为参数传递并给筛选组件传Props？

你的代码存在几个关键问题，导致无法正确传递Props并渲染目标组件，以下是修正后的实现：

核心问题分析 #

1. 错误存储已渲染组件：直接存储<AR008Users />这类已渲染元素会固定初始Props，无法动态传递新属性。
2. 数组解构错误：filter返回的是数组，直接解构const {component} = filterData会得到undefined，应该取匹配的单个元素。
3. 组件命名不符合规范：React要求自定义组件变量名首字母大写，否则会被当作原生HTML标签处理。

修正后的代码 #

// 存储组件引用而非已渲染元素
const LineItemViewComponent = [{
  lineItem: "AR008",
  component: AR008Users,  
},{
  lineItem: "AR009",
  component: AR009Users,
},{
  lineItem: "AR010",
  component: AR010Users,
}];

// 使用find匹配单个目标组件，比filter更高效
const matchedComponent = LineItemViewComponent.find(item => item.lineItem === this.props.each.lineItem);

const viewDataFunction = () => {
  // 处理未匹配到组件的边界情况
  if (!matchedComponent) return null;
  
  // 变量名首字母大写，符合React组件规范
  const TargetComponent = matchedComponent.component;
  
  return (
    <TargetComponent 
      assessClicked={assessClicked}
      count={this.state.count}
      setAssessApi={this.setAssessApi} 
    />
  );
};

关键改动说明 #

• 存储组件引用：将component: <AR008Users />改为component: AR008Users，保留组件的类/函数引用，这样就能在渲染时动态传入所需Props。
• 使用find方法：find会直接返回第一个匹配的组件对象，避免处理数组的额外逻辑。
• 首字母大写的组件变量：TargetComponent遵循React的命名规则，确保React识别为自定义组件而非原生标签。
• 边界情况处理：增加if (!matchedComponent) return null，防止因未匹配到组件导致的渲染错误。

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