Как использовать jss с контентом, который приходит с сервера?

Question

[Владимир Голубь]

Как использовать jss, если мы получаем тексты статьи с разметкой с сервера ?

Answer 1

[Павел Диденко]

Из документации к React:

function createMarkup() {
  return {__html: 'First · Second'};
}

function MyComponent() {
  return <div dangerouslySetInnerHTML={createMarkup()} />;
}

Почитайте про dangerouslySetInnerHTML и вопрос отпадет

Comments

[Владимир Голубь]

немного про другое вопрос, как прокинуть classes, для автоматического создания классов и привязки стилей ?

[Павел Диденко]

Тогда надо точнее формулировать вопрос. Задавайте стили по тегам, которые находятся внутри определенного класса, у вас ведь вряд ли будет 2 тега p с разными классами.

Если пользуетесь styled-components, то это будет выглядеть примерно так:

import React from 'react';
import styled from 'styled-components';
import CustomScrollbars from '../../../CustomScrollbars';

const Text = ({ text }) => {

  if (!text) return null;

  function createMarkup(string) {
    return {__html: `${string}`};
  };

  return (
    <StyledText>
      <CustomScrollbars custom={{br: 0, wrapWidth: 4}}>
        <Content dangerouslySetInnerHTML={createMarkup(text)} />
      </CustomScrollbars>
    </StyledText>
  );
};

const StyledText = styled.div`
  height: 175px;
  margin-top: 10px;
  padding: 8px 0;
  border: 0;
  border-top: 1px solid #515151;
  border-bottom: 1px solid #515151;
  color: #515151;
`;

const Content = styled.div`
  &:ul {
    font-size: 16px;
    list-style-type: square;
  };
  &:h2 {
    margin: 7px 0 5px;
    font-size: 20px;
  };
  &:p {
    margin: 0 0 5px;
    font-size: 16px;
  };
`;

export default Text;