Подсчет символов в массиве после карты

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>

, и мне кажется, что он дает мне количество элементов в массиве. , а не количество символов. Как мне go исправить это?

Answer 1

В вашем Component1 сделайте следующее:

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

Это вернет вам строку, содержащую все элементы в вашем массиве, разделенные ",". После этого вы можете обрабатывать строку так, как хотите в компоненте. И вы можете проверить длину компонента Component1, вызывающего content.length. Я бы посоветовал, если вы хотите рендерить jsx с помощью содержимого prop, чтобы создать дополнительный prop для строки. Что-то вроде этого:

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>
);
}