Reactjs 如何使用贴图和连接渲染react组件？

我有一个组件，它将显示字符串数组。代码如下所示：

React.createClass({
  render() {
     <div>
        this.props.data.map(t => <span>t</span>)
     </div>
  }
})

class List extends React.Component {
  const { data } = this.props;

  render() {
     <div>
        {data.length
          ? data.reduce((prev, curr) => [prev, ', ', curr])
          : 'No data in the array'
        }
     </div>
  }
}

但是，渲染结果是

[Object]、[Object]、[Object]

我不知道如何解释对象成为要渲染的组件。有什么建议吗？

您返回的

{t}

是一个对象，而不是字符串。检查一下文档

通过对从

映射

返回的数组使用

.join（）

，您正在加入对象数组<代码>[对象]，…

您可以将逗号放在

中，使其按您希望的方式呈现

  render() {
    return (
      <div>
        { this.props.data.map(
            (t,i) => <span>{t}{ this.props.data.length - 1 === i ? '' : ','} </span>
          )
        }
      </div>
    )
  }

render（）{
返回(
{this.props.data.map(
（t，i）=>{t}{this.props.data.length-1==i？“”：‘，‘’
)
}
)
}

---

示例：

您可以使用

reduce

组合数组的多个元素：

React.createClass({
  render() {
     <div>
        this.props.data
        .map(t => <span>t</span>)
        .reduce((accu, elem) => {
            return accu === null ? [elem] : [...accu, ',', elem]
        }, null)
     </div>
  }
})

React.createClass({
render（）{
这是道具数据
.map（t=>t）
.减少（（累计、要素）=>{
返回accu==null？[elem]：[…accu'，，'，，elem]
}，空）
}
})

这将使用null初始化累加器，因此我们可以将第一项包装到数组中。对于数组中的每个后续元素，我们使用

…-运算符

，构造一个包含所有先前元素的新数组，添加分隔符，然后添加下一个元素

使用嵌套数组将“，”保留在外部

{this.props.data.map（（元素，索引）=>index==this.props.data.length-1？{element}:[{element}，“，”）}

通过将数据保存到数组并修改最后一个元素来优化它，而不是一直检查它的最后一个元素是否存在

  let processedData = this.props.data.map((element, index) => [<span key={index}>{element}</span>, ", "])
  processedData [this.props.data.length - 1].pop()
  <div>
      {processedData}
  </div>

让processedData=this.props.data.map（（元素，索引）=>[{element}，，”）
processedData[this.props.data.length-1].pop（）
{processedData}

一个简单的解决方案是使用

reduce（）

，无需第二个参数，也无需传播之前的结果：

class List extends React.Component {
  render() {
     <div>
        {this.props.data
          .map(t => <span>{t}</span>)
          .reduce((prev, curr) => [prev, ', ', curr])}
     </div>
  }
}

我的变体：

{this.props.data
    .map(item => <span>{item}</span>)
    .map((item, index) => [index > 0 && ', ', item ])}

{this.props.data
.map（项=>{item}）
.map（（项，索引）=>[index>0&&'，项]）

这对我很有用：

    {data.map( ( item, i ) => {
                  return (
                      <span key={i}>{item.propery}</span>
                    )
                  } ).reduce( ( prev, curr ) => [ prev, ', ', curr ] )}

{data.map（（项目，i）=>{
返回(
{item.propery}
)
}）.reduce（（上一个，当前）=>[prev'，，'，，curr]））

使用React 16更新：现在可以直接渲染字符串，因此您可以通过删除所有无用的

标记来简化代码

const list = ({ data }) => data.reduce((prev, curr) => [ prev, ', ', curr ]);

---

接受的答案实际上返回一个数组数组，因为

prev

每次都是一个数组。React足够聪明，可以实现这一点，但它很容易在将来引发问题，例如在为每个映射结果提供关键帧时破坏React扩散算法

新的

React.Fragment

功能使我们能够以一种易于理解的方式执行此操作，而不存在潜在的问题

class List extends React.Component {
  render() {
     <div>
        {this.props.data
          .map((t, index) => 
            <React.Fragment key={index}>
              <span> {t}</span> ,
            </React.Fragment>
          )
      </div>
  }
}

类列表扩展了React.Component{
render（）{
{this.props.data
.map（（t，索引）=>
{t} ,，
)
}
}

---

使用

React.Fragment

我们可以简单地将分隔符

，

放在返回的HTML的外部，React不会抱怨。

如果我只想呈现一个以逗号分隔的组件数组，我通常会发现

reduce

过于冗长。在这种情况下，一个较短的解决方案是

{arr.map((item, index) => (
  <Fragment key={item.id}>
    {index > 0 && ', '}
    <Item {...item} />
  </Fragment>
))}

，React 16允许您直接使用字符串，因此不再需要将字符串包装在span标记中。如果您还想立即处理自定义消息，请继续构建（并避免在空数组上抛出错误），您可以在数组的length属性上使用三元if语句引导操作。这可能类似于：

React.createClass({
  render() {
     <div>
        this.props.data.map(t => <span>t</span>)
     </div>
  }
})

class List extends React.Component {
  const { data } = this.props;

  render() {
     <div>
        {data.length
          ? data.reduce((prev, curr) => [prev, ', ', curr])
          : 'No data in the array'
        }
     </div>
  }
}

类列表扩展了React.Component{
const{data}=this.props；
render（）{
{data.length
？数据减少（（上一个，当前）=>[上一个，，，，，当前]）
：“数组中没有数据”
}
}
}

这应该返回一个平面数组。通过提供一个初始空数组，并从结果中过滤不需要的第一个逗号，来处理第一个对象不可iterable的大小写

[{}, 'b', 'c'].reduce((prev, curr) => [...prev, ', ', curr], []).splice(1) // => [{}, 'b', 'c']

---

使用es6，您可以执行以下操作：

const joinComponents=（累加器，当前）=>[
…蓄电池，
累加器长度？'，'：'，
现在的
]

然后运行：

listComponents
  .map(item => <span key={item.id}> {item.t} </span>)
  .reduce(joinComponents, [])

列表组件
.map（项=>{item.t}）
.减少（连接组件，[]）

我是唯一一个认为这里的答案中存在大量不必要的扩展和嵌套的人吗？当然，这是简洁的观点，但它为规模或反应问题打开了大门，改变了它们处理嵌套数组/片段的方式

const joinJsxArray = (arr, joinWith) => {
  if (!arr || arr.length < 2) { return arr; }

  const out = [arr[0]];
  for (let i = 1; i < arr.length; i += 1) {
    out.push(joinWith, arr[i]);
  }
  return out;
};

// render()
<div>
  {joinJsxArray(this.props.data.map(t => <span>t</span>), ', ')}
</div>

const joinJsxArray=（arr，joinWith）=>{
如果（！arr | | arr.length<2）{return arr；}
const out=[arr[0]]；
对于（设i=1；it），'，'）}

一个数组，没有嵌套。也没有性感的方法链接，但是如果您经常这样做，您可以将其添加到数组原型中，或者将其包装到一个函数中，该函数还需要一个映射回调来一次性完成所有操作。

函数YourComponent（props）{
常量标准=[]；
如果（某物）{
标准。推送（{something}）；
}
//将jsx元素与``
常量元素=标准。减少（（累计，元素）=>{
返回accu==null？[elem]：[…accu'，，'，，elem]
}，空）；
//以jsx友好的方式呈现
返回元素.map（（el，index）=>{el}）；
}

从React 17开始，您只需：

<div>
  {[1, 2, 3].map((e, i) => <p key={i}>{e}</p>)}
</div>

{[1,2,3].map（（e，i）=>
{e}
）

它将呈现为：

一,

二,

三,

谢谢，这正是我需要的。你可以

<div>
  {[1, 2, 3].map((e, i) => <p key={i}>{e}</p>)}
</div>