Question

我不明白为什么这样写ReactJS代码。我希望有人可以一点一点地跟我说说。

我了解JSX和React中的三元运算符和If / Else，但不是。特别是

如果（i> 2）返回归还孩子 }）}

我看不到该代码如何工作（但确实如此）。我的意思是返回然后返回？

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';

function Parent() {

    return (      

       <Head >
           <span>1</span>
           <span>2</span>
           <span>3</span>
           <span>4</span>
           <span>5</span>
           <span>6</span>
           <span>7</span>
       </Head> 

    )
}

function Head({children}){

return (
<div>{React.Children.map(children, (child, i) => {
        if (i > 2) return
        return child
                })}
    </div>

        )
    }

ReactDOM.render(<Parent />, document.getElementById('root'));

我正在做的是尝试了解儿童道具。我想显示前3个孩子（确实如此），但我不理解

map(children, (child, i) => { if (i > 2) return
return child
})}

Answer 1

您正在遍历一系列“孩子”。 “ child”代表数组中的当前项目，而“ i”代表该元素的索引。由于数组是基于零的，因此第一条语句读取“ i”是否达到了第三次迭代（0、1、2），然后从map函数返回，并且不执行下一行。否则返回“孩子”。

此条件语句如何在.map函数中工作？

1 个答案: