Возврат нескольких отфильтрованных ссылок в виде гиперссылки в реакции - PullRequest
Новая
       26

Возврат нескольких отфильтрованных ссылок в виде гиперссылки в реакции

0 голосов
/ 29 апреля 2020

Я очень новичок, чтобы реагировать, и мне было поручено превратить любой простой текст, который имеет www, http, https, в активируемую гиперссылку. Я смог это сделать, но теперь в виде обычного текста добавлено больше ссылок, и именно здесь у меня возникают проблемы, потому что он возвращает только одну ссылку (последнюю ссылку) в виде гиперссылки. Это машинописная реакция и уже существующая программа. Я думаю, мне придется сделать адреса массивом, вставить содержимое в массив и визуализировать массив в гиперссылке. Моя проблема в том, что я даже не знаю, с чего начать. Это код, который я написал изначально, чтобы превратить обычный текст в гиперссылку 

   case 'text':
      return (
        <div>
          {' '}
          {note.text.map((content: string, idx: number) => {
             if (/(?:www|https?|http?)[^\s]*/i.test(content)) {
              let addresses = `${content.match(/(?:www|https?|http?)[^\s]*/)}`
               return <span>{content.split(addresses)[0]}<a href={addresses}>{addresses}</a>{content.split(addresses)[1]}</span>
            } else {
              return ( 
                <p key={idx}>{content}</p>
                )
              }})}
        </div>
      );

И это остальная часть кода. 

export const NoteDisplay: React.FC<{ note: Note }> = ({ note }) => {
  switch (note.kind) {
    case 'text':
      return (
        <div>
          {' '}
          {note.text.map((content: string, idx: number) => {
             if (/(?:www|https?|http?)[^\s]*/i.test(content)) {
              let addresses = `${content.match(/(?:www|https?|http?)[^\s]*/)}`
              return <p key={idx}>{content}><a href={addresses}>{addresses}</a></p>
            } else {
              return ( 
                <p key={idx}>{content}</p>
                )
              }})}
        </div>
      );
    case 'orderedlist':
      return (
        <div>
          <p>{note.title}</p>
          <ol>
            {note.items.map((item: string, idx: number) => (
              <li key={idx}>{item}</li>
            ))}
          </ol>
        </div>
      );
    case 'definedlist':
      return (
        <div>
          <p>{note.title}</p>
          <dl>
            {note.items.map(({ label, value }, idx: number) => {
              return (
                <React.Fragment key={idx}>
                  <dt>{label}</dt>
                  <dd>{value}</dd>
                </React.Fragment>
              );
            })}
          </dl>
        </div>
      );
    case 'chronology':
      return (
        <div>
          <p>{note.title}</p>
          <dl>
            {note.items.map(({ event_date, events }, idx: number) => {
              return (
                <React.Fragment key={idx}>
                  <dt>{event_date}</dt>
                  {events.map((event: string) => {
                    return <dd>{event}</dd>;
                  })}
                </React.Fragment>
              );
            })}
          </dl>
        </div>
      );
  }
};

Любая помощь будет высоко ценится как Я супер новичок в программировании в целом. Спасибо!

...