有没有办法在反应中做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

您还可以使用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>
  );
}

Answer 2

尝试使用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>
    );
  }

Answer 3

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

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>