#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>}