Question

我目前有一些代码可以执行此操作：

sum$.subscribe(sum => sumNum = sum);

f（i）和g（i）返回单个反应jsx元素，具体取决于我是什么。我们将作为道具传递给我。

我无法将其转换为不使用for循环的表单。有没有办法使用地图？我需要在f（i）和g（i）周围没有额外的div。换句话说，我的结果不等于这个

let result = []
const number

for (let i = 0; i < number; i++) {
  result.push(f(i))
  result.push(g(i))
}

return (
  <div>
    {result}
  </div>
)

没有额外div的要求使我有点难以想出一个地图解决方案或任何其他不使用for循环的解决方案。你有什么想法吗？

Answer 1

您可以返回（或推送）包含2个项目的数组，然后将spreading展平为Array#concat。

我已使用Array#from生成项目，但您可以使用for循环，然后展平result。

＆＃13;

const f = (i) => <li key={`f${i}`}>f - {i}</li>;
const g = (i) => <li key={`g${i}`}>g - {i}</li>;

const Demo = ({ length }) => (
  <ul>
  {
    [].concat(...Array.from({ length }, (_, i) => [f(i), g(i)]))
  }
  </ul>
);

ReactDOM.render(
  <Demo length={5} />,
  demo
);

＆＃13;

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.js"></script>

<div id="demo"></div>

＆＃13;

如果您使用react 16，则可以返回fragment代替：

＆＃13;

const f = (i) => <li key={`f${i}`}>f - {i}</li>;
const g = (i) => <li key={`g${i}`}>g - {i}</li>;

const Demo = ({ length }) => (
  <ul>
  {
    Array.from({ length }, (_, i) => (
      <React.Fragment key={i}>
        {f(i)}
        {g(i)}
      </React.Fragment>
    ))
  }
  </ul>
);

ReactDOM.render(
  <Demo length={5} />,
  demo
);

＆＃13;

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.2.0/umd/react.development.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.2.0/umd/react-dom.development.js"></script>



<div id="demo"></div>

＆＃13;

不要使用循环来交替推送到阵列

1 个答案: