有没有办法在react中做 array.join

IT技术 arrays reactjs dictionary
2021-04-30 12:37:40

我想使用类似 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>)并让它在每个项目之间插入一个分隔符。

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

尝试 .join 与 React Elements 可能不适合你。这将产生您描述的需要的结果。

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

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

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

显示代码片段

使用Array.mapandReact.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
其它你可能感兴趣的问题
上一篇如何使 vs 代码自动完成 React 组件的 prop 类型？ 下一篇如何在react选择下拉列表中更改 zIndex