0

亲爱的天才 StackOverflowians，

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

我想在显示/隐藏样式文档的问题旁边有一个按钮。该按钮看起来和工作得很好，但是隐藏/显示的文档没有得到应该与之关联的生成的样式类。

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

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

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

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

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缺少对类的引用（我猜是.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 呈现...但是该类未应用于组件！你怎么看？

4

1 回答 1

2

您的 styled-components 类没有被应用，因为您正在为自定义组件设置样式，但您没有包含 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>
  );
};
于 2018-07-22T17:10:33.793 回答