这段 React 代码如何还能再次精简？

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

已注册用户请登录

这是一个创建于 2485 天前的主题，其中的信息可能已经有所发展或是发生改变。

render 了一个数组遍历后的结果，但数组中还包含数组，不知道在 jsx 语法中如何能再次遍历这个数组让代码更加精简，其实 className 为 market-block 的 div 是可以复用的。但是我实在笨拙，没有找出更简洁的方法。

数据源：

const stockQuote = [[
  {
    stockName: "上证指数",
    currentPrice: "3217.96",
    change: "+5.51",
    percent: "+0.17%"
  }, {
    stockName: "深圳成指",
    currentPrice: "3217.96",
    change: "+5.51",
    percent: "+0.17%"
  }, {
    stockName: "创业板指",
    currentPrice: "3217.96",
    change: "+5.51",
    percent: "+0.17%"
  }
], [
  {
    stockName: "沪深 300",
    currentPrice: "3217.96",
    change: "+5.51",
    percent: "+0.17%"
  }, {
    stockName: "中证 500",
    currentPrice: "3217.96",
    change: "+5.51",
    percent: "+0.17%"
  }, {
    stockName: "上证 50",
    currentPrice: "3217.96",
    change: "+5.51",
    percent: "+0.17%"
  }
]];

代码：

render() {
  const stocks = stockQuote.map((d, i) => {
    return (
      <Row key={i}>
        <Col span={8} className="market-block-col">
          <div className="market-block">
            <h3>{d[0].stockName}</h3>
            <p>{d[0].currentPrice}</p>
            <span>{d[0].change}</span>
            <span>{d[0].percent}</span>
          </div>
        </Col>
        <Col span={8} className="market-block-col">
          <div className="market-block">
            <h3>{d[1].stockName}</h3>
            <p>{d[1].currentPrice}</p>
            <span>{d[1].change}</span>
            <span>{d[1].percent}</span>
          </div>
        </Col>
        <Col span={8} className="market-block-col">
          <div className="market-block">
            <h3>{d[2].stockName}</h3>
            <p>{d[2].currentPrice}</p>
            <span>{d[2].change}</span>
            <span>{d[2].percent}</span>
          </div>
        </Col>
      </Row>
    )
  });

  return (
    <Carousel afterChange={this.handleCarouselChanged.bind(this)}>
      {stocks}
    </Carousel>
  );
}

9 条回复 • 2017-07-09 19:06:25 +08:00

azh7138m

2017-07-09 09:59:54 +08:00 via Android

每个 Col 是一样的话，这个地方也可以用 map 呀

jin5354

2017-07-09 10:21:48 +08:00

col 部分继续 map，用 d.map 来写

nmgwddj

2017-07-09 10:29:50 +08:00

@azh7138m 是在 jsx 语句里面 { d.map((data, index) => {} ) } 这样吗？

mm163

2017-07-09 12:06:59 +08:00

用变量，数组呀, ，在 return( ) 之前写，想怎么用循环都行。
render() {
var stocks =[];
for(var i;i<stockQuote.length;i++){
var ss=[];
var row = stockQuote[i];
for(var j=0;j<row.length;j++){
var col = row[j];
ss.push(<Col span={8} className="market-block-col">
<div className="market-block">
<h3>{col[j].stockName}</h3>
<p>{col[j].currentPrice}</p>
<span>{col[j].change}</span>
<span>{col[j].percent}</span>
</div>
</Col>);
}
stocks.push( <Row key={i}>{ss}</Row>)
}

return (
<Carousel afterChange={this.handleCarouselChanged.bind(this)}>
{stocks}
</Carousel>
);
}

必要时也可以用 React.createElement()/React.cloneElement()。

mm163

2017-07-09 12:10:58 +08:00

JSX 不一定必须写到 return 里，写哪里都行，它就一的 element 对象，就像给变量赋值一样。

azh7138m

2017-07-09 12:40:02 +08:00 via Android

@nmgwddj 嗯，是这个意思

sparkle2015

2017-07-09 13:56:52 +08:00

另一种方法，先把 stockQuote 拍扁，变成一维数组，就可以只用一次 map 了。

[ [1, 2, 3] , [4, 5, 6] ].reduce( (a, b) => a.concat(b))

> [1, 2, 3, 4, 5, 6]

qiutc

2017-07-09 14:11:27 +08:00

render() {
return (
<Carousel afterChange={this.handleCarouselChanged.bind(this)}>
{
stockQuote.map((d, i) => (
<Row key={i}>
{
d.map((item, j) => (
<Col key={j} span={8} className="market-block-col">
<div className="market-block">
<h3>{item.stockName}</h3>
<p>{item.currentPrice}</p>
<span>{item.change}</span>
<span>{item.percent}</span>
</div>
</Col>
))
}
</Row>
))
}
</Carousel>
);
}

怎么样

otakustay

2017-07-09 19:06:25 +08:00

虽然我估计 Row 里面不允许你放 QuoteCol 这种自定义组件……不允许的话就把 QuoteCol 搞成函数调用吧