样式组件计算样式但不应用它

Question

亲爱的天才 Whosebugians，

我正在尝试编写一个应用程序，用户可以在其中配置问题和答案，并为每个问题定义帮助文本。我正在用打字稿 React 写这篇文章——当你想定义问题的答案类型时，这很方便。

我想在 shows/hides 样式文档的问题旁边有一个按钮。该按钮看起来和工作都很好，但是 hidden/shown 的文档没有得到应该与之关联的生成样式 class。

这里是显示帮助文档的功能组件：

let HelpTextBody = function(props: { helpDocument: DocumentationStore }) {
  return (
    <div>
      {props.helpDocument.toReallySimple().map(tok => {
        return React.createElement(tok.tag, null, tok.content);
      })}
    </div>
  );
};

tok 来自自定义 class DocumentationStore，它几乎是 markdown-it 的包装器，一个方便的 js 库，用于处理 md 文件，我会喜欢我的用户将他们的帮助文本写入（并以这种方式存储）。

所以我这样做（在 DocumentationStore class 的不同模块中）：

toReallySimple(): MdJson[] {
  let bigParsed = this.md_.parse(this.Text, null).filter(
  t => return t.type == "inline" || t.type.indexOf("open") > 0
});

稍后，我将 HelpTextBody 样式设置为：

const StyledHelpDocument = styled(HelpTextBody)`
  background-color: lightslategray;
`;

现在保持简单，这样我就可以看看它是否有效...

然后我将它包含在带有我导出的按钮的组件中：

class HelpText extends React.Component<helpProps, helpState> {
  constructor(props: helpProps) {
    super(props);
    this.state = {
      hidden: true
    };
  }

  swapHidden() {
    this.setState({
      hidden: !this.state.hidden
    });
  }

  render() {
    if (this.state.hidden) {
      return (
        <span>
          <StyledButton
            itemScope={this.state.hidden}
            onClick={() => this.swapHidden()}
          >
            Need Help?
          </StyledButton>
        </span>
      );
    } else {
      return (
        <span>
          <StyledButton onClick={() => this.swapHidden()}>
            Hide Help
          </StyledButton>
          <StyledHelpDocument helpDocument={this.props.helpDocument} />
        </span>
      );
    }
  }

所以我将所有内容打包并放入浏览器中，我得到的是这个样式标签（单击按钮后），它看起来正确：

<style data-styled-components="">
/* sc-component-id: sc-bdVaJa */
.sc-bdVaJa {} .gscXTZ{background:red;color:white;font-size:1em;margin:1em;padding:0.25em 1em;border:2px solid red;border-radius:3px;}.iwtdKP{background:white;color:red;font-size:1em;margin:1em;padding:0.25em 1em;border:2px solid red;border-radius:3px;}
/* sc-component-id: sc-bwzfXH */
.sc-bwzfXH {} .hAvMqj{background-color:lightslategray;}</style>

但是我的 html 文档缺少对 class 的引用（我猜是.hAvMqj？）

<span>
  <button class="sc-bdVaJa iwtdKP">Hide Help</button>
  <div><p>Here the text is grey</p></div>
  <!-- ^This^ is the StyledHelpDocument... no class!-->
</span>

那么我哪里错了？我不明白为什么它会生成样式，并且组件的 HTML 呈现...但是 class 未应用于组件！你怎么看？

Answer 1

您的样式化组件 class 未被应用，因为您正在为自定义组件设置样式，但您没有将 className 作为道具包含在内。在您要设置样式的组件中添加 className 作为可选道具，并确保在该组件的渲染方法中的某处应用 className。对于您的情况，应该这样添加：

let HelpTextBody = function(props: { helpDocument: DocumentationStore, className: string }) {
  return (
    <div className={props.className}>
      {props.helpDocument.toReallySimple().map(tok => {
        return React.createElement(tok.tag, null, tok.content);
      })}
    </div>
  );
};

样式组件计算样式但不应用它

styled component computing style but not applying it

reactjs

tsx

styled-components