显示带有空格和 JSX 的数组

Posted 2023-02-22

【中文标题】显示带有空格和 JSX 的数组

【英文标题】：Displaying array with spaces and JSX

【发布时间】：2020-01-26 02:08:38

【问题描述】：

这是我编写的代码。 说有一句话“你好，请以@followme的身份关注我们”。这个函数将做的是找到包含“@”的单词，然后再次返回该句子，尽管 @ 将被链接。如果我使用 .join(" ") 加入此数组，则 JSX 元素将显示为 [object, object] 因此作为修复，我已在数组中每隔一个索引添加一个空格。

我的问题是这行得通吗？我是否错过了一些如此简单的事情，可以让我的生活更轻松，很想知道！谢谢

---- 作为一个编辑，如果我没有在数组中添加额外的空格或不使用 .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>
    );  
 ;

【问题讨论】：

我相信会有很多替代方法以另一种方式完成您正在做的事情（分割空间，然后在另一个循环中添加空间，或者在循环中渲染时间）。我认为不会有更清洁的方法。只是我的 2 美分。

【参考方案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>

这是working example - 希望对您有所帮助！

【讨论】：

我本来打算建议一种字符串构建方法，但是工作量很大：D 很高兴你发布了这个。