Question

亲爱的天才StackOverflowians，

我正在尝试编写一个应用程序，用户可以在其中配置问题和答案，以及为每个问题定义帮助文本。我正在用打字稿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的包装，toReallySimple(): MdJson[] { let bigParsed = this.md_.parse(this.Text, null).filter( t => return t.type == "inline" || t.type.indexOf("open") > 0 });是一个用于处理md文件的便捷js库，我希望我的用户编写自己的帮助文本输入（并以这种方式存储）。

所以我这样做（在DocumentationStore类的另一个模块中）：

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

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

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>

因此，我将其全部打包，然后将内容放入浏览器，然后返回的是这个样式标签（单击按钮后），看起来很正确：

<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缺少对该类的引用（我猜是.hAvMqj吗？）

    FileInputStream excelFile = new FileInputStream(new File(fileDirectory+file));
    Workbook workbook = new XSSFWorkbook(excelFile);
    Sheet datatypeSheet = workbook.getSheetAt(0);
    Iterator<Row> iterator = datatypeSheet.iterator();

    // Add additional column for results
    while (iterator.hasNext()) {
        Row currentRow = iterator.next();
        Cell cell = currentRow.createCell(currentRow.getLastCellNum(), CellType.STRING);
        if(currentRow.getRowNum() == 0)
            cell.setCellValue("NEW-COLUMN");
    }

那么我要去哪里错了？我不明白为什么它会生成样式，而组件的HTML会呈现...但是该类未应用于组件！你觉得呢？

Answer 1

由于正在对自定义组件进行样式设置，因此未应用您的样式组件类，但尚未包含className作为支持。在要设置样式的组件中添加className作为可选的prop，并确保将className应用于该组件的render方法中的某个位置。对于您的情况，应该这样添加它：

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>
  );
};

样式化的组件计算样式，但未应用

1 个答案: