reactjs - 如何在 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,
    });
}

当我尝试将链接作为参数传递时，它给了我 [Object object]，因为它的字符串连接

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

并且消息正在渲染中传递

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

标签： reactjs

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