PROSAGA码农传奇-React-在React JSX中循环

20 条回复

0#
回复此人
生如夏花 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 如果你还没有数组 <code> map() </code> 喜欢@FakeRainBrigand的答案，并且想要内联这个，所以源布局对应的输出比@ SophieAlpert的答案更接近： </p> <H1> 使用ES2015（ES6）语法（扩展和箭头功能） </H1> <P> <a href="http://plnkr.co/edit/mfqFWODVy8dKQQOkIEGV?p=preview" rel="noreferrer"> http://plnkr.co/edit/mfqFWODVy8dKQQOkIEGV?p=preview </A> </p> <pre class="lang-js prettyprint-override"> <code> <tbody> {[...Array(10)].map((x, i) => <ObjectRow key={i} /> )} </tbody> </code> </pre> <P> 回复：与巴别塔，它的转变 <a href="https://babeljs.io/docs/advanced/caveats/" rel="noreferrer"> 警告页面 </A> 说 <code> Array.from </code> 传播需要，但目前（ <code> v5.8.23 </code> ）传播实际情况时似乎并非如此 <code> Array </code> 。我有一个 <a href="https://github.com/babel/babel.github.io/pull/392" rel="noreferrer"> 文档问题 </A> 公开澄清一下。但请自担风险或使用polyfill。 </p> <H1> 香草ES5 </H1> <H2> <code> Array.apply </code> </H2> <pre> <code> <tbody> {Array.apply(0, Array(10)).map(function (x, i) { return <ObjectRow key={i} />; })} </tbody> </code> </pre> <H2> 内联IIFE </H2> <P> <a href="http://plnkr.co/edit/4kQjdTzd4w69g8Suu2hT?p=preview" rel="noreferrer"> http://plnkr.co/edit/4kQjdTzd4w69g8Suu2hT?p=preview </A> </p> <pre class="lang-js prettyprint-override"> <code> <tbody> {(function (rows, i, len) { while (++i <= len) { rows.push(<ObjectRow key={i} />) } return rows; })([], 0, 10)} </tbody> </code> </pre> <H2> 结合其他答案的技术 </H2> <P> 保持源布局对应于输出，但使内联部分更紧凑： </p> <pre class="lang-js prettyprint-override"> <code> render: function () { var rows = [], i = 0, len = 10; while (++i <= len) rows.push(i); return ( <tbody> {rows.map(function (i) { return <ObjectRow key={i} index={i} />; })} </tbody> ); } </code> </pre> <H1> 使用ES2015语法和 <code> Array </code> 方法 </H1> <P> 同 <code> Array.prototype.fill </code> 你可以这样做，作为使用传播的替代方案，如上图所示： </p> <pre class="lang-js prettyprint-override"> <code> <tbody> {Array(10).fill(1).map((el, i) => <ObjectRow key={i} /> )} </tbody> </code> </pre> <P> （我认为你实际上可以省略任何争论 <code> fill() </code> ，但我不是百分之百。）感谢@FakeRainBrigand纠正我早期版本的错误 <code> fill() </code> 解决方案（见修订版）。 </p> <H1> <code> key </code> </H1> <P> 在所有情况下 <code> key </code> attr通过开发构建减轻了警告，但是在孩子身上无法访问。如果您希望子项中的索引可用，则可以传递额外的attr。看到 <a href="https://facebook.github.io/react/docs/lists-and-keys.html" rel="noreferrer"> 列表和键 </A> 讨论。 </p> </DIV>

编辑
1#
回复此人
部落用户 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 如果numrows是一个数组，那很简单。 </p> <pre> <code> <tbody> {numrows.map(item => <ObjectRow />)} </tbody> </code> </pre> <P> React中的数组数据类型非常好，数组可以支持新数组，并支持过滤，减少等。 </p> </DIV>

编辑
2#
回复此人
妖邪 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> ES2015 / Babel的可能性是使用生成器函数来创建JSX数组： </p> <pre> <code> function* jsxLoop(times, callback) { for(var i = 0; i < times; ++i) yield callback(i); } ... <tbody> {[...jsxLoop(numrows, i => <ObjectRow key={i}/> )]} </tbody> </code> </pre> </DIV>

编辑
3#
回复此人
star*위위 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 您还可以使用自调用功能： </p> <pre> <code> return <tbody> {(() => { let row = [] for (var i = 0; i < numrows; i++) { row.push(<ObjectRow key={i} />) } return row })()} </tbody> </code> </pre> </DIV>

编辑
4#
回复此人
荧惑 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 如果您选择将其转换为内部的<strong> return（） </强> 的的<strong> 给予 </强> 方法，最简单的选择就是使用的<strong> 地图（） </强> 方法。使用map（）函数将数组映射到JSX语法，如下所示（ <EM> 使用ES6语法 </EM> ）。 </p> <HR /> <P> 的<strong> 内部父组件 </强> ： </p> <P> <code> <tbody> { objectArray.map((object, index) => <ObjectRow key={index} object={object}>) } </tbody> </code> </p> <P> 请注意 <code> key </code> 属性已添加到您的子组件中。如果未提供键属性，则可以在控制台上看到以下警告。 </p> <BLOCKQUOTE> <P> 警告：数组或迭代器中的每个子节点都应该有一个独特的“关键”道具。 </p> </BLOCKQUOTE> <HR /> <P> 现在在的<strong> ObjectRow </强> 组件，您可以从它的属性访问该对象。 </p> <P> 的<strong> 在ObjectRow组件内部 </强> </p> <P> <code> const { object } = this.props </code> </p> <P> 要么 </p> <P> <code> const object = this.props.object </code> </p> <P> 这应该会提取您从父组件传递给变量的对象 <code> object </code> 在的<strong> ObjectRow </强> 零件。现在，您可以根据您的目的吐出该对象中的值。 </p> <HR /> <P> 参考文献： </p> <P> <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map" rel="noreferrer"> Javascript中的map（）方法 </A> </p> <P> <a href="https://github.com/lukehoban/es6features#readme" rel="noreferrer"> ECMA Script 6或ES6 </A> </p> </DIV>

编辑
5#
回复此人
Just do it | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 不确定这是否适合您的情况，但经常 <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map" rel="noreferrer"> 地图 </A> 是一个很好的答案。 </p> <P> 如果这是你的代码与for循环： </p> <pre> <code> <tbody> for (var i=0; i < objects.length; i++) { <ObjectRow obj={objects[i]} key={i}> } </tbody> </code> </pre> <P> 你可以像这样写它 <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map" rel="noreferrer"> 地图 </A> ： </p> <pre> <code> <tbody> {objects.map(function(object, i){ return <ObjectRow obj={object} key={i} />; })} </tbody> </code> </pre> <P> ES6语法： </p> <pre> <code> <tbody> {objects.map((object, i) => <ObjectRow obj={object} key={i} />)} </tbody> </code> </pre> </DIV>

编辑
6#
回复此人
老人与海 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 要循环多次并返回，你可以借助它来实现它 <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/from" rel="noreferrer"> <code> from </code> </A> 和 <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map" rel="noreferrer"> <code> map </code> </A> ： </p> <pre> <code> <tbody> { Array.from(Array(i)).map(() => <ObjectRow />) } </tbody> </code> </pre> <P> 哪里 <code> i = number of times </code> </p> </DIV>

编辑
7#
回复此人
咿呀哟 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 我喜欢它 </p> <pre> <code> <tbody> { numrows ? ( numrows.map(obj => { return <ObjectRow /> }) ) : null} </tbody> </code> </pre> </DIV>

编辑
8#
回复此人
不浪漫 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 简单地使用的<strong> 地图 </强> <EM> 排列 </EM> ES6语法的方法： </p> <pre> <code> <tbody> {items.map(item => <ObjectRow key={item.id} name={item.name} />)} </tbody> </code> </pre> <P> 别忘了 <code> key </code> 属性。 </p> </DIV>

编辑
9#
回复此人
十二* | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <H1> ES2015 的<strong> Array.from </强> 使用地图功能+键 </H1> <P> 如果你什么都没有 <code> .map() </code> 您可以使用 <code> Array.from() </code> 随着 <code> mapFn </code> 重复元素： </p> <pre> <code> <tbody> {Array.from({ length: 5 }, (v, k) => <ObjectRow key={k} />)} </tbody> </code> </pre> </DIV>

编辑
10#
回复此人
Little it | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 您当然可以使用.map解决，如其他答案所示。如果你已经使用了babel，你可以考虑使用 <a href="https://www.npmjs.com/package/jsx-control-statements" rel="noreferrer"> JSX控制语句 </A> 它们需要一些设置，但我认为它在可读性方面是值得的（特别是对于非反应开发人员）。如果你使用短绒，那也是 <a href="https://www.npmjs.com/package/eslint-plugin-jsx-control-statements" rel="noreferrer"> eslint-插件 - JSX控制语句 </A> </p> </DIV>

编辑
11#
回复此人
喜欢一个人 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 我知道这是一个旧线程，但您可能想要结账 <a href="http://wix.github.io/react-templates/"> http://wix.github.io/react-templates/ </A> ，它允许你在反应中使用jsx风格的模板，带有一些指令（例如rt-repeat）。 </p> <P> 您的示例，如果您使用react-templates，将是： </p> <pre> <code> <tbody> <ObjectRow rt-repeat="obj in objects"/> </tbody> </code> </pre> </DIV>

编辑
12#
回复此人
老夫的少女心 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 这是一个简单的解决方案。 </p> <pre> <code> var Object_rows=[]; for (var i=0; i < numrows; i++) { Object_rows.push(<ObjectRow/>) } <tbody> {Object_rows} </tbody> </code> </pre> <P> 不需要映射和复杂的代码。您只需要将行推送到数组并返回值来呈现它。 </p> </DIV>

编辑
13#
回复此人
晴天？霹雳 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 可以想象它就像你只是调用JavaScript函数一样。你不能使用 <code> for </code> 循环，函数调用的参数将去： </p> <pre> <code> return tbody( for (var i = 0; i < numrows; i++) { ObjectRow() } ) </code> </pre> <P> 看看这个功能如何 <code> tbody </code> 正在通过一个 <code> for </code> 循环作为参数，当然这是一个语法错误。 </p> <P> 但是你可以创建一个数组，然后将其作为参数传递： </p> <pre> <code> var rows = []; for (var i = 0; i < numrows; i++) { rows.push(ObjectRow()); } return tbody(rows); </code> </pre> <HR /> <P> 使用JSX时，您可以使用基本相同的结构： </p> <pre> <code> var rows = []; for (var i = 0; i < numrows; i++) { // note: we add a key prop here to allow react to uniquely identify each // element in this array. see: https://reactjs.org/docs/lists-and-keys.html rows.push(<ObjectRow key={i} />); } return <tbody>{rows}</tbody>; </code> </pre> <P> 顺便说一句，我的JavaScript示例几乎就是JSX转换的例子。玩弄 <a href="https://babeljs.io/repl" rel="noreferrer"> Babel REPL </A> 了解JSX的工作原理。 </p> </DIV>

编辑
14#
回复此人
晴天3 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 以下是React doc的示例： <a href="https://facebook.github.io/react/docs/jsx-in-depth.html#javascript-expressions-as-children" rel="nofollow noreferrer"> https://facebook.github.io/react/docs/jsx-in-depth.html#javascript-expressions-as-children </A> </p> <pre> <code> function Item(props) { return <li>{props.message}</li>; } function TodoList() { const todos = ['finish doc', 'submit pr', 'nag dan to review']; return ( <ul> {todos.map((message) => <Item key={message} message={message} />)} </ul> ); } </code> </pre> <P> 作为你的情况，我建议像这样写： </p> <pre> <code> function render() { return ( <tbody> {numrows.map((roe, index) => <ObjectRow key={index} />)} </tbody> ); } </code> </pre> <P> 请注意Key非常重要，因为React使用Key来区分数组中的数据。 </p> </DIV>

编辑
15#
回复此人
Jacob | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 我用这个： </p> <pre> <code> gridItems = this.state.applications.map(app => <ApplicationItem key={app.Id} app={app } /> ); </code> </pre> <P> PD：永远不会忘记密钥，否则你会收到很多警告！ </p> </DIV>

编辑
16#
回复此人
文艺青年3 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 您的JSX代码将编译为纯JavaScript代码，任何标记都将替换为 <code> ReactElement </code> 对象。在JavaScript中，您无法多次调用函数来收集返回的变量。 </p> <P> 它是非法的，唯一的方法是使用数组来存储返回变量的函数。 </p> <P> 或者你可以使用 <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map" rel="noreferrer"> <code> Array.prototype.map </code> </A> 这是可用的 <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map#Specifications" rel="noreferrer"> 自JavaScript ES5起 </A> 处理这种情况。 </p> <P> 也许我们可以编写其他编译器来重新创建一个新的JSX语法来实现重复函数 <a href="https://docs.angularjs.org/api/ng/directive/ngRepeat" rel="noreferrer"> 角的 <code> ng-repeat </code> </A> 。 </p> </DIV>

编辑
17#
回复此人
1号 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 让我们说你们州里有一系列物品： </p> <pre> <code> [{name: "item1", id: 1}, {name: "item2", id: 2}, {name: "item3", id: 3}] <tbody> {this.state.items.map((item) => { <ObjectRow key={item.id} name={item.name} /> })} </tbody> </code> </pre> </DIV>

编辑
18#
回复此人
biu~额 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 你可以这样做： </p> <pre> <code> let foo = [1,undefined,3] { foo.map(e => !!e ? <Object /> : null )} </code> </pre> </DIV>

编辑

登录后才能参与评论