reactjs - 根据反应中字符串数组中指定的顺序对组件进行排序

Question

我有一个字符串数组，它指定了我的组件的呈现顺序。

const requiredOrder = [ "Line1Component", "Line3Component", "Line2Component" ];

我也有名称与上面数组中的字符串匹配的组件。

我想根据 requiredOrder 数组中提到的顺序渲染组件。

当我尝试运行以下代码时，我得到：

Objects are not valid as a React child (found: object with keys {OrderredComponents}). If you meant to render a collection of children, use an array instead.

Minified: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object.

我试图将 return 语句包装在一个包装器中，但仍然无法找出问题所在。

我想避免这里提到的 case 语句，因为我的 requiredOrder 列表可能会变得非常大。

class OrderMyComponents extends React.Component {
  render() {
    const requiredOrder = [
      "Line1Component",
      "Line2Component",
      "Line3Component"
    ];

    const Line1Component = () => (
      <div>
        <b>Line 1</b>
      </div>
    );
    const Line2Component = () => (
      <div>
        <b>Line 2</b>
      </div>
    );
    const Line3Component = () => (
      <div>
        <b>Line 3</b>
      </div>
    );

    const OrderredComponents = requiredOrder.map(function(item) {
      return { item };
    });

    return <OrderredComponents />;
  }
}

ReactDOM.render(
  <OrderMyComponents />,
  document.getElementById("react")
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="react"></div>

标签： reactjs

Answer 1

我根据https://medium.com/@Carmichaelize/dynamic-tag-names-in-react-and-jsx-17e366a684e9创建了一个以组件名称作为键的对象

这解决了我的问题。

感谢agent_hunt和thakur-karthik的帮助。

const components = {
  Line1Component: () => (
    <div>
      <b>Line 2</b>
    </div>
  ),
  Line2Component: () => (
    <div>
      <b>Line 2</b>
    </div>
  ),
  Line3Component: () => (
    <div>
      <b>Line 3</b>
    </div>
  )
};

class OrderMyComponents extends React.Component {
  render() {
    const requiredOrder = [
      "Line1Component",
      "Line2Component",
      "Line3Component"
    ];

    return requiredOrder.map((item, key) => {
      const Component = components[item];

      return <Component />;
    });
  }
}

ReactDOM.render(
  <OrderMyComponents />,
  document.getElementById("react")
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="react"></div>