在映射后计算数组中的字符

Question

我目前正在使用如下所示的数组：

{
    "OuterArray": [
        {
            "ArrayNumber": "1",
            "InnerArray": [
                "SOMETHING",
                "what about this"
            ]
        }
    ]
}

我想要输出

InnerArray: SOMETHING, what about this

到目前为止，我已经输出了正确的列表，其中Component1.jsx 将内容作为道具如下：

<h1>InnerArray: {this.props.content}</h1>

而Component2.jsx 获取数组并映射/减少它：

knownIssuesList() {
    return (
        <div>
            {list.OuterArrays
              .map(a=> (
                  <div key={a.ArrayNumber} >
                      <Component1
                          content={a.InnerArray
                            .map(b=> (<span key={a.ArrayNumber}>{b}</span>))
                            .reduce((prev, curr) => [prev, ', ', curr])}
                      />
                  </div>
              ))}
        </div>
    );
  }

但是，我想添加一个查看更多功能，如果输出的列表超过一定数量的字符，我可以选择缩短列表并添加查看更多，以便用户可以选择是否扩展它.我首先想检查它是否会在最终结果中正确输出正确数量的字符，因此我将Component1 替换为：

<h1>InnerArray: {this.props.content.length}</h1>

它似乎给了我数组中的项目数，而不是字符数。我应该如何解决这个问题？

Answer 1

在您的Component1 中执行以下操作：

<Component1
   content={a.InnerArray.join(",")}
/>

这将返回一个字符串，其中包含数组中用“，”分隔的所有元素。之后，您可以在组件中根据需要处理字符串。您可以在调用 content.length 的 Component1 中检查长度。如果你想使用 content 属性渲染 jsx，我建议你为字符串创建一个额外的属性。像这样的东西：

knownIssuesList() {
 return (
  <div>
   {list.OuterArrays.map(a => {
    const arrayNumberString = a.InnerArray.join(",");
    return (
      <div key={a.ArrayNumber}>
        <Component1
          content={<span>{arrayNumberString}</span>}
          length={arrayNumberString.length}
        />
      </div>
    );
  })}
</div>
);
}