NextJS-如何将样式-JSX应用于从方法返回的JSX

Question

使用stypled-jsx使用nextjs我写了下面的组件。

现在，我想知道如何将样式-JSX应用于正在从getLinks方法返回的JSX。

在下面的示例中，来自getLinks方法的JSX未被设计。

class MainHeader extends Component {
  getLinks = () => {
    const links = linkData.map(link => (
      <Link key={link.path} href={link.path}>
        <a className="link">{link.title}</a>
      </Link>
    ));
    return links;
  };
  render() {
    return (
      <div className="mainContainer">
        {this.getLinks()}
        <style jsx>
          {`
            .mainContainer {
              background: ${colors.pri};
              display: flex;
              height: 60px;
            }
            .link {
              color: ${colors.tPri};
              font-size: 2rem;
              margin-left: 1.6rem;
            }
          `}
        </style>
      </div>
    );
  }
}

我知道我可以像我在下面的代码中一样做到这一点，但是我宁愿让我的渲染方法更加干净。

lass MainHeader extends Component {
  render() {
    return (
      <div className="mainContainer">
        {linkData.map(link => (
          <Link key={link.path} href={link.path}>
            <a className="link">{link.title}</a>
          </Link>
        ))}
        <style jsx>
          {`
            .mainContainer {
              align-items: center;
              background: ${colors.pri};
              display: flex;
              height: 60px;
            }
            .link {
              color: ${colors.tPri};
              font-size: 2rem;
              margin-left: 1.6rem;
              text-decoration: none;
            }
          `}
        </style>
      </div>
    );
  }
}

Answer 1

stypled-jsx的作者：）

您有两个选择。第一个将.link样式移至它们所属的位置（getLinks方法）：

getLinks = () => {
  const links = linkData.map(link => (
    <>
      <Link key={link.path} href={link.path}>
        <a className="link">{link.title}</a>
      </Link>
      <style jsx>{`
        .link {
          color: ${colors.tPriD};
        }
      `}</style>
    </>
  ));
  return links;
}

不必担心循环，样式-JSX会涂上它们并仅渲染样式一次。

第二个选项是使用css.resolve的较新功能：

getLinks = (scopedClass) => {
  const links = linkData.map(link => (
    <Link key={link.path} href={link.path}>
      <a className={`${scopedClass} link`}>{link.title}</a>
    </Link>
  ));
  return links;
}
render() {
  const { className, styles } = css.resolve`
    .link {
      color: ${colors.tPri};
      font-size: 2rem;
      margin-left: 1.6rem;
    }
  `
  return (
    <div className="mainContainer">
      {styles}
      {this.getLinks(className)}
    </div>
  )
}

如果您是不是使用样式中的道具，我建议您将它们移到组件之外，因为它会表现更好。

希望这会有所帮助。

fwiw我们有一个针对型号的社区，用于JSX https://spectrum.chat/styled-jsx

Answer 2

也许类似的东西对您来说足够干净

class MainHeader extends Component {
  getLinks = () => {
    const links = linkData.map(link => (
      <Link key={link.path} href={link.path}>
        <a className="link">{link.title}</a>
      </Link>
    ));
    return <>
            {links}
              <style jsx>
          {`
            .link {
              color: ${colors.tPri};
              font-size: 2rem;
              margin-left: 1.6rem;
            }
          `}
        </style>
           </>;
  };
  render() {
    return (
      <div className="mainContainer">
        {this.getLinks()}
        <style jsx>
          {`
            .mainContainer {
              background: ${colors.pri};
              display: flex;
              height: 60px;
            }
          `}
        </style>
      </div>
    );
  }
}