Заменить строку в содержании

Question

Посмотрите на мой чат. js содержание:

import React, { Component } from "react";

class Chat extends Component {
  constructor(props) {
    super(props);
    this.state = {
      messages: [],
      message: ""
    };
  }
  submitMessage(event) {
    event.preventDefault();
    this.setState(state => ({
      messages: [<li>{this.state.message}</li>, ...state.messages]
    }));
    this.setState({
      message: ""
    });
  }
  render() {
    return (
      <>
        <div class="container py-3">
          <h2 className="text-center mb-4">Simple Chat</h2>
          <form
            onSubmit={e => {
              this.submitMessage(e);
            }}
          >
            <input
              type="text"
              className="form-control"
              placeholder={"Enter your message..."}
              value={this.state.message}
              onChange={e => this.setState({ message: e.target.value })}
            />
            <button type="submit" className="btn btn-success mt-2">
              Send Message
            </button>
          </form>

          <div className="container border mt-2">
            <ul className="group-list mt-3 pt-2">{this.state.messages}</ul>
          </div>
        </div>
      </>
    );
  }
}

export default Parent;

Кроме того, это мой пример : https://codesandbox.io/s/objective-water-1e8uq

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

, это мое содержание:

Are you good @Daniel ? 

Мне нужно преобразовать вышеуказанное сообщение в следующее содержание:

Are you good <a href="#">@Daniel</a> ? 

Я использую react-router-dom, поэтому мне нужно заменить ссылку на этот код:

Например:

<Router>
   <Link to={ '#'} onClick={() => {this.example()}}>
    @Daniel
  </Link>
</Router>;

Answer 1

Я обновил вашу функцию submitMessage, вот код:

submitMessage(event) {
        event.preventDefault();
        const { message } = this.state;
        let msg = message.replace(/@([a-zA-Z0-9]+)/g, value => `<a href="#"> ${value} </a>`);
        this.setState(state => ({
          messages: [<li dangerouslySetInnerHTML={{__html: msg}} />, ...state.messages]
        }));
        this.setState({
          message: ""
        });
      }

вот рабочий код: https://codesandbox.io/s/stupefied-platform-zmg94

Answer 2

Это должно быть сделано с заменой строки:

// This is to have as tag "Are you good <a href="#">@Daniel</a> ?" (with @ in the username)
const replacementReg = /(@[a-zA-Z0-9]+)/g;
// This is to have as tag "Are you good <a href="#">Daniel</a> ?" (without @ in the username)
const replacementReg = /@([a-zA-Z0-9]+)/g;

function decorateWithLink(text) {
   text.replace(replacementReg, replaced => `<a href="#"> ${replaced} </a>`);
}

, и вы должны использовать в своем компоненте:

this.setState(state => ({
    messages: [
        <li>{decorateWithLink(this.state.message)}</li>,
        ...state.messages
    ],
    message: '' // with this you don't need to call again the this.setState
}));