React中能否将组件赋值给数组变量？

当然可以！在React里把JSX元素（或者组件）赋值给变量、存入数组是非常常见的操作，完全能实现你想要的「存储组件、排序后渲染」的需求～

先纠正你写法里的语法问题 #

你当前的代码存在语法错误：不能直接在对象字面量里写return(...)语句。我们需要调整写法，把JSX元素直接作为值存入数组项，或者根据场景用函数包裹动态生成的组件。

实现方案示例 #

场景1：静态/预定义的组件内容

如果你的组件内容是固定的（或者依赖的值不会动态变化），可以直接把JSX元素存入数组，同时为每个项添加排序用的标识（方便后续排序）：

// 假设你的值已经定义
const myValue = "第一个内容";
const mySecondValue = "第二个内容";

// 存储带排序标识的JSX元素
const records = [
  { sortPriority: 2, component: <Row key="myValue">{myValue}</Row> },
  { sortPriority: 1, component: <Row key="mySecondValue">{mySecondValue}</Row> }
];

// 根据排序标识排序（这里按sortPriority升序）
const sortedRecords = [...records].sort((a, b) => a.sortPriority - b.sortPriority);

// 渲染排序后的组件
function MyComponent() {
  return (
    <div className="container">
      {sortedRecords.map(item => item.component)}
    </div>
  );
}

场景2：需要动态生成的组件内容

如果你的组件依赖后续可能变化的状态/ props，建议把组件包装成函数，这样每次渲染时都会获取最新的值：

import { useState } from 'react';

function MyComponent() {
  const [myValue, setMyValue] = useState("初始内容");
  const [mySecondValue, setMySecondValue] = useState("初始第二内容");

  // 存储返回JSX的函数
  const records = [
    { sortPriority: 2, getComponent: () => <Row key="myValue">{myValue}</Row> },
    { sortPriority: 1, getComponent: () => <Row key="mySecondValue">{mySecondValue}</Row> }
  ];

  // 排序
  const sortedRecords = [...records].sort((a, b) => a.sortPriority - b.sortPriority);

  return (
    <div className="container">
      {/* 调用函数获取最新的JSX */}
      {sortedRecords.map(item => item.getComponent())}
      <button onClick={() => setMyValue("更新后的内容")}>更新值</button>
    </div>
  );
}

关键说明 #

• 存储JSX元素时，确保每个元素都有唯一的key属性（你已经加上了，这点做得很好！），这是React列表渲染的要求。
• 排序时记得创建数组的副本（比如用[...records]），避免直接修改原数组（符合React的不可变数据原则）。

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