Стиль компонентных вычислений, но не применяется

Question

Уважаемый гений Stackruians,

Я пытаюсь написать приложение, в котором пользователи могут настраивать вопросы и ответы, а также определять текст справки для каждого вопроса. Я пишу это в машинописном тексте 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-код компонента визуализируется... но класс не применяется к компоненту! Как вы думаете?

Answer 1

Ваш класс 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>
  );
};