javascript - 如何扩展ReactJS的Link组件并显示innerHtml

我看了很多有关如何通过继承扩展React组件的资料。我发现的示例始终是添加事件而不是操作innerHtml。因此，我找不到更简单的方法来做到这一点：

// React packages
import React from 'react';
import { Link } from 'react-router-dom';

export default class LinkX extends React.Component {
    render() {
        return (
            <Link
                className={this.props.className}
                to={this.props.to}
                replace={this.props.replace}
            >
                <span>{this.props.html}</span> // Wrap with span
            </Link>
    }
}

在我的示例中，我想添加一个<span>包围链接的内部文本。因此，我添加了一个新属性html作为Link实例的文本。

然后，我用这种方式：

<LinkX to={"/"} html="Home" />

我想知道是否有办法从LinkX组件获取innerHtml，将其用<span>包围，然后将其放入Link中而不使用props。然后像这样使用它：

<LinkX to={"/"}>Home</LinkX>

最佳答案

我觉得您需要像这样使用children：

export default class LinkX extends React.Component {
    render() {
        return (
            <Link
                className={this.props.className}
                to={this.props.to}
                replace={this.props.replace}
            >
                <span>{this.props.children}</span> // Wrap with span
            </Link>
    }
}

然后你可以像这样使用它
<LinkX><b>bold</b></LinkX>