Question

所以我为经常使用的路由器链接创建了一个自定义组件，这是它的JS文件的外观：

import { Link } from "react-router-dom";

import styles from "./LNLink.module.css";

class LNLink extends Component {
  render() {
    return (
      <Link className={styles.LNLink} to={this.props.to}>
        {this.props.text}
      </Link>
    );
  }
}

export default LNLink;

现在，例如在我的Login.js中调用此组件，如下所示：

            <LNLink
              to="/sign-up"
              text="Sign up"
              className={styles.loginSignUpLink}
            />

现在这一切在功能上都可以正常工作，问题是在Login.js中分配的类className={styles.loginSignUpLink}未被分配，未被分配和覆盖，它们根本不在浏览器检查中，为什么？这样吗？

奖金问题：代替传递text道具，是否有可能在<LNLink>和结束标记之间发送它，并以相同的方式使用它？

非常感谢

Answer 1

要回答问题的红利部分，您可以在<LNLink>之间传递任何内容，然后使用this.props.children将其呈现在此组件中

<LNLink>Whatever you want here (text, JSX, other components)</LNLink>

return (
      <Link className={styles.LNLink} to={this.props.to}>
        {this.props.children}
      </Link>
);

Answer 2

我认为您还应该使用className作为LNLink的道具。然后children来获取标签内的所有内容。

class LNLink extends Component {
  render() {
    return (
      <Link className={this.props.className} to={this.props.to}>
        {this.props.children}
      </Link>
    );
  }
}

export default LNLink;

<LNLink
  to="/sign-up"
  className={styles.loginSignUpLink}
/>
  Sign up
</Link>

Answer 3

好的，我发现了，问题是我没有使用传递给组件的样式，修复很简单，只需在组件上添加this.props.className作为样式，所以在我的{{1 }}我将LNLink.js修改如下：

className

现在我正在使用className={classNames(styles.LNLink, this.props.className)}软件包，因为我正在使用css模块，所以它看起来更干净，但是如果不是，则可以按如下所示键入它：

classNames

反应自定义组件样式

3 个答案: