Отображение массива с пробелами и JSX

Question

Вот код, который я написал.Скажем, есть предложение "Здравствуйте, пожалуйста, следуйте за нами как @followme".Эта функция найдет слово, которое содержит «@», затем вернет предложение снова, хотя «@» будет затем связано.Если бы я присоединился к этому массиву с помощью .join (""), элемент JSX будет отображаться как [объект, объект], так что в качестве исправления я добавил пробел в массив при каждом другом индексе.

Мой вопросЭто работает?Если бы я пропустил что-то настолько простое, что могло бы сделать мою жизнь проще, хотелось бы знать!Спасибо

---- В качестве правки, если я не добавил лишние пробелы в массив или не использовал .join, тогда предложение буквально одно слово ...

const getInstagram = props => {
  //Split sentence into an array
  let test = props.split("@" +1).pop().split(" ");
  let one;

//Get the word that contains @
  test.map(word => {
    if (word.includes("@")) {
      one = word;
    }
  });


  //Gets the array position
  let position = test.indexOf(one);
  test.splice(position);

  if (position >= 0) {
    let line = <a href={`https://instagram.com/${one}`}>{one}</a>
    test.splice(position,0,line)    
  }

  for(let i = 0; i < test.length; i++) {
    test.splice(i++,0, " ");
  }

    return (
      <p style={{ opacity: 1 }}>
      {test}
      {console.log(test)}
      </p>
    );  
 };

Answer 1

Другой подход, позволяющий сохранить пробелы входной фразы, который позволяет извлекать «@anchors» и заключать в элемент <a>, заключается в сканировании входной строки через for-loop и извлечении и переносе подстрок привязки какони встречаются следующим образом:

function ExtractAnchors(phrase) {

  const parts = [];

  /* Iterate characters of phrase */
  for (let i = 0, j = 0; j < phrase.length; j++) {

    /* If character is "@", extract the anchor */
    if (phrase[j] === "@") {

      /* Add string from prior index to start of anchor */
      parts.push(phrase.substring(i, j));

      /* Find end-index of the anchor */
      let k = j;
      while (k < phrase.length && phrase[k] !== " ") {
        k++;
      }

      /* Extract the actual anchor substring from start and end indicies */
      const anchor = phrase.substring(j, k)
      parts.push(<a href={`https://instagram.com/${anchor}`}>{anchor}</a>);

      /* Update indicies to end of extracted anchor */
      j = k;
      i = k;

    } else if (j === phrase.length - 1) {
      if (i !== j) {
        /* Edge case to ensure whole string is collected if no anchor
        or chracters exist after an anchor */
        parts.push(phrase.substring(i, j + 1));
      }
    }
  }

  return parts;
}

Это можно использовать следующим образом, при этом все случаи работают так, как ожидается:

<div>
  <p>Plain string:</p>
  {ExtractAnchors("Follow us")}

  <p>String with whitespaces and single anchor:</p>
  {ExtractAnchors("Follow us at @foo now")}

  <p>String with whitespaces, multiple anchors, one at end of phrase:</p>
  {ExtractAnchors("Follow us at @foo now or @bar")}

  <p>String with whitespaces, multiple anchors, one at start of phrase:</p>
  {ExtractAnchors("@foo or @bar are good to follow")}

  <p>Empty string:</p>
  {ExtractAnchors("")}
</div>

Вот рабочий пример - надеюсь, это поможет!