web-dev-qa-db-ja.com

反応でarray.joinを行う方法はありますか

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>)を実行して、各項目の間にセパレーターを挿入します。

arraysjoindictionaryreactjs
18
Ben

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>
  );
}
11
Bless

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>
    );
  }
8
joemaddalone

.reduceとReactfragments を組み合わせて実行することもできます。

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>
4
Jan

ところで反応する関数を提供することもできます。私のアプローチはPush(value); Push(glue);の_.forEach_ペアであり、その後にpop()が末尾の接着剤となります...

_function() {
    joinLike = [];
    originData.forEach(function(v,i) {
        joinLike.Push(v);
        joinLike.Push(<br>);
    })
    joinLike.pop();
    return joinLike;
}
_
2
informatik-handwerk.de

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
2
ArranJacques

flatMap()を試すこともできます。ブラウザのサポートが近づいていますが、それまではポリフィルを使用できます。唯一の欠点は、最後の要素を失う必要があることです。

例えば。

{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
])
1
Brad Reed

このような関数を使用できます

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

または、これを見つけたパッケージを使用できます https://www.npmjs.com/package/react-join

1
Andrew Luca

要求されたソリューションを作成するには、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>
  );
}
0
Avenir Çokaj