如何在React中添加动态创建的链接

Question

   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,
    });
}

由于它的字符串串联，当我尝试将链接作为参数传递时，它给了我[对象对象]

用户单击链接时，他/她应导航到页面。

消息正在此处通过渲染传递

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

Answer 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 && <div className={cx('topLevelMessage')}>
    <MessageBox showIcon={false} hasClose type={type} level="section" onClose={this.closeMessageBox}>
        <span>{message} {link}</span>
    </MessageBox>
</div>}

Answer 2

如果U要像字符串变量一样显示HTML标签。您可以使用这个lib React render html来呈现您的字符串html。

import renderHTML from 'react-render-html';

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