React - 以匹配的排序顺序渲染孩子？答案

【问题标题】：React - Render children in matching sort order?React - 以匹配的排序顺序渲染孩子？
【发布时间】：2021-04-09 02:36:22
【问题描述】：

给定一个渲染其子级的组件，我无法让子级按照 newOrder 顺序进行排序：

export default class EnhancedLinks extends React.Component {
  render() {
    return (
      <div>
        {React.Children.map(
          this.props.children.filter((c) => c),
          (el) => el
        )}
      </div>
    );
  }
}

export default class App extends React.Component {
  render() {
    const newOrder = ["dandelion", "cantaloupe", "apple", "banana"];

    return (
      <div>
        <EnhancedLinks>
          <div name="apple" color="red">apple</div>
          <div name="banana" color="yellow">banana</div>
          <div name="cantaloupe" color="orange">cantaloupe</div>
          <div name="dandelion" color="green">dandelion</div>
        </EnhancedLinks>
      </div>
    );
  }
}

知道如何让EnhancedLinks 子级按照newOrder 数组的顺序进行渲染吗？

这是一个小提琴： https://codesandbox.io/s/react-and-scss-forked-z1p0b?file=/src/index.js

【问题讨论】：

标签： javascript reactjs

【解决方案1】：

将newOrder 数组映射到<div>s，而不是单独写出它们？

    const colors = ['red', 'yellow', 'orange', 'green'];
    return (
      <div>
      <EnhancedLinks>
        {newOrder.map((name, i) => <div name={name} color={colors[i]}>{name}</div>)}
      </EnhancedLinks>
      </div>
    );

【讨论】：

【解决方案2】：

您的 EnchancedLinks 组件应该呈现 div、颜色和文本，而不是外部包装组件。这样，复制/粘贴的代码就更少了，您可以在数组中设置顺序，或根据需要操作数组。

export default class EnhancedLinks extends React.Component {
  render() {
    return (
      <div name={this.props.name} color={this.props.color}>
        {this.props.name}
      </div>
    );
  }
}

export default class App extends React.Component {
  render() {
    const newOrder = [
      {
        name: "dandelion",
        color: "green"
      },
      {
        name: "cantaloupe",
        color: "orange"
      },
      {
        name: "apple",
        color: "red"
      },
      {
        name: "banana",
        color: "yellow"
      }];

    return (
      <div>
        {newOrder.map((link) => {
          return <EnhancedLinks {...link} />
        })}
      </div>
    );
  }
}

我已经用我想出的解决方案叉了你的小提琴：https://codesandbox.io/s/react-and-scss-forked-c1r1f

【讨论】：