有没有办法在反应中做 array.join

Question

我想使用类似 array.join 的语法在数组的每个元素之间注入一个分隔符。

类似于以下内容：

render() {
 let myArray = [1,2,3];
 return (<div>
   {myArray.map(item => <div>{item}</div>).join(<div>|</div>)}
</div>);
}

我已经使用 lodash.transform 方法让它工作了，但感觉很难看，我只想做 .join(<some-jsx>) 并让它在每个项目之间插入一个分隔符。

Answer 1

// typescript
export function joinArray<T, S>(array: Array<T>, separator: S): Array<T | S> {
  return array.reduce<(T | S)[]>((p, c, idx) => {
    if (idx === 0) return [c];
    else return [...p, separator, c];
  }, []);
}

// javascript
export function joinArray(array, separator) {
    return array.reduce((p, c, idx) => {
        if (idx === 0)
            return [c];
        else
            return [...p, separator, c];
    }, []);
}

// example
console.log(joinArray(["1", "2", "3"], 2));
// -> ["1", 2, "2", 2, "3"]

// example
// privacyViews -> JSX.Element[]
const privacyViews = joinArray(
  privacys.value.map(({ key, name }) => {
    return (
      <button onClick={() => clickPrivacy(key!)} class={Style.privacyBtn}>
        {name}
      </button>
    );
  }),
  <span class={Style.privacyBtn}>、</span>
);

Answer 2

如果您使用的是 TypeScript，您可以简单地复制此文件并使用 jsxJoin:

import { Fragment } from "react";

/**
 * Join together a set of JSX elements with a separator.
 *
 * @see https://stackoverflow.com/q/33577448/5506547
 */
function jsxJoin(components: JSX.Element[], separator: any) {
    // Just to be sure, remove falsy values so we can add conditionals to the components array
    const filtered = components.filter(Boolean);
    return filtered.length === 0
        ? null
        : (filtered.reduce(
              (acc, curr, i) =>
                  acc.length
                      ? [
                            ...acc,
                            // Wrap the separator in a fragment to avoid `missing key` issues
                            <Fragment key={i}>{separator}</Fragment>,
                            curr
                        ]
                      : [curr],
              []
          ) as JSX.Element[]);
}

export { jsxJoin };

Answer 3

使用Array.map 和React.Fragment，您可以将每个数组项与您想要的任何JSX 元素连接起来。在下面的示例中，我使用了 <br /> 标记，但这可以替换为您想要的任何元素。

const lines = ['line 1', 'line 2', 'line 3'];
lines.map((l, i) => (
    <React.Fragment key={i}>{l}{i < (lines.length - 1) ? <br /> : ''}</React.Fragment>
));

输出将是

line 1 <br />
line 2 <br />
line 3

Answer 4

您还可以使用reduce 在数组的每个元素之间插入分隔符：

render() {
  let myArray = [1,2,3];
  return (
    <div>
      {
        myArray
          .map(item => <div>{item}</div>)
          .reduce((acc, x) => acc === null ? [x] : [acc, ' | ', x], null)
      }
    </div>
  );
}

或使用片段：

render() {
  let myArray = [1,2,3];
  return (
    <div>
      {
        myArray
          .map(item => <div>{item}</div>)
          .reduce((acc, x) => acc === null ? x : <>{acc} | {x}</>, null)
      }
    </div>
  );
}

Answer 5

你可以使用这样的函数

function componentsJoin(components, separator) {
  return components.reduce(
    (acc, curr) => (acc.length ? [...acc, separator, curr] : [curr]),
    []
  );
}

或者可以用一个包，找到这个 https://www.npmjs.com/package/react-join

Answer 6

你也可以试试flatMap()。浏览器支持即将到来，但在那之前你可以使用 polyfill。唯一的缺点是你必须丢失最后一个元素。

例如。

{myArray.flatMap(item => [<div>{item}</div>, <div>|</div>]).slice(0, -1)}

或者

{myArray.flatMap((item, i) => [
  <div>{item}</div>,
  i < myArray.length - 1 ? <div>|</div> : null
])

Answer 7

要生成请求的解决方案，在 React 中 join 似乎不起作用，因此使用 map 和 reduce 你可以这样做：

render() {
  let myArray = [1, 2, 3];
  return (
    <div>
        {myArray
            .map(item => <div>{item}</div>)
            .reduce((result, item) => [result, <div>|</div>, item])}
    </div>
  );
}

Answer 8

您也可以通过组合.reduce 和React fragments 来实现。

function jsxJoin (array, str) {
  return array.length > 0
    ? array.reduce((result, item) => <>{result}{str}{item}</>)
    : null;
}

function jsxJoin (array, str) {
  return array.length > 0
    ? array.reduce((result, item) => <React.Fragment>{result}{str}{item}</React.Fragment>)
    : null;
}

const element = jsxJoin([
  <strong>hello</strong>,
  <em>world</em>
], <span> </span>);

ReactDOM.render(element, document.getElementById('root'));

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

Answer 9

顺便说一句。您还可以提供功能来做出反应。我的方法是.forEach 对push(value); push(glue);，然后是pop() 拖尾胶......

function() {
    joinLike = [];
    originData.forEach(function(v,i) {
        joinLike.push(v);
        joinLike.push(<br>);
    })
    joinLike.pop();
    return joinLike;
}

Answer 10

尝试使用 React Elements 进行 .join 可能不会为您带来成功。这将产生您描述需要的结果。

render() {
    let myArray = [1,2,3];
    return (
      <div>
        {myArray.map((item, i, arr) => {
          let divider = i<arr.length-1 && <div>|</div>;
          return (
            <span key={i}>
                <div>{item}</div>
                {divider}
            </span>
          )
        })}
      </div>
    );
  }