Блог

Главная - Вопросы по программированию - Как добавить динамически созданную ссылку в React

Как добавить динамически созданную ссылку в React

#reactjs

#reactjs

Вопрос:

    moveToListSuccess = (listMovedTo, listMovedId) => {
    const link = <a href={`/mylist?id=${listMovedId}`}>{listMovedTo}</a>;
    this.showTopMessage('success', `1 item successfully moved to ${link}`);
    this.getSavedListAction();
}

showTopMessage = (type, message) => {
    this.setState({
        showMessage: true,
        message,
        type,
    });
}

Это выдает мне [Object object], когда я пытаюсь передать ссылку в качестве параметра с момента ее конкатенации строк

Когда пользователь нажимает на ссылку, он / она должен перейти на страницу.

введите описание изображения здесь

И сообщение передается здесь при рендеринге

   {showMessage amp;amp; <div className={cx('topLevelMessage')}>
                <MessageBox showIcon={false} hasClose type={type} level="section" onClose={this.closeMessageBox}>
                    <span>{`${message}`}</span>
                </MessageBox>
            </div>}

Комментарии:

1. Чего вы пытаетесь достичь? Пожалуйста, предоставьте больше информации.

2. Не могли бы вы уточнить свой вопрос. это очень неясно

3. добавлены подробности @Arseniy-II

4. литералы шаблона @vini принимают примитивные типы. это плохо работает с объектами.

Ответ №1:

Литералы шаблона принимают примитивные типы. Это плохо работает с объектами

Чтобы решить вашу проблему, используйте третий аргумент и передайте link объект 

 moveToListSuccess = (listMovedTo, listMovedId) => {
    const link = <a href={`/mylist?id=${listMovedId}`}>{listMovedTo}</a>;
    this.showTopMessage('success', "1 item successfully moved to ",link );
    this.getSavedListAction();
}

я бы не рекомендовал этот подход, но я предоставил решение без изменения какого-либо из ваших текущих потоков. Установите link объект на свой state , как показано ниже

 showTopMessage = (type, message,link) => {
    this.setState({
        showMessage: true,
        message,
        type,
        link
    });
}

Вы можете отобразить, как показано ниже

 {showMessage amp;amp; <div className={cx('topLevelMessage')}>
    <MessageBox showIcon={false} hasClose type={type} level="section" onClose={this.closeMessageBox}>
        <span>{message} {link}</span>
    </MessageBox>
</div>}

Ответ №2:

Если вы хотите отобразить HTML-тег в виде строковой переменной. Вы можете использовать эту библиотеку для рендеринга html с реакцией для рендеринга вашей строки html.

 import renderHTML from 'react-render-html';

{showMessage amp;amp; <div className={cx('topLevelMessage')}>
   <MessageBox showIcon={false} hasClose type={type} level="section" onClose={this.closeMessageBox}>
       <span>{renderHTML(message)}</span>
   </MessageBox>
</div>}