如何在 useState 中渲染 Link - nextjs

Question

我正在尝试渲染我之前在 useState 中定义的 link。这是代码：

export const CheckEntry = ({ id, zala }) => {
const [message, setMessage] = useState('');
const [title, setTitle] = useState('');
const [faIcon, setFaIcon] = useState('');
const [iconColor, setIconColor] = useState('');
const [usr, setUsr] = useState();

useEffect(() => {
    if (!usr) {
        return null;
    }
    else {
        if (data.user.membershipLocation != zala) {
            setTitle("Access denied")
            setFaIcon(faSquareXmark)
            setIconColor("red");
            setMessage(`You don't have a membership for this training center. You can purchase ${<Link href="/buy-membership"><a>here</a></Link>}.`)
        }}
    }, [usr])
    if (message != '') {
        return (
            <div>
                <section className={styles.card}>
                    <h4 className={styles.sectionTitle}>{title}</h4>
                    <Spacer size={0.5} axis="vertical" />
                    <FontAwesomeIcon
                        icon={faIcon}
                        style={{ fontSize: 100, color: iconColor }}
                    />
                    <Spacer size={0.5} axis="vertical" />
                    <h3 className={styles.sectionMessage}>{message}</h3>
                </section>
            </div>
        )
    }
    else {
        return null;
    }
}

然而，当它呈现时，它显示：

如何成功渲染此 Link 组件？

Answer 1

发生这种情况是因为您的 message 是字符串而不是 jsx。

如果要渲染元素，请像这样使用 jsx：

setMessage(
  <>
    You don't have a membership for this training center.
    You can purchase 
    <Link href="/buy-membership"><a>here</a></Link>
    .
  <>
)

如何在 useState 中渲染 Link - nextjs

How to render a Link in useState - nextjs

reactjs

next.js