Matwey_Ptushkin
@Matwey_Ptushkin
Новичок - самоучка.

Как вставить текст в div из JSON так, чтобы html элементы считывались а не отображались как текст?

5f04e21977df4105394392.png
5f04e2c5234c2929481323.png

import React from "react";
import "./About.css";

class About extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      leftTitle: "",
      rightTitle: "",
      col: "",
      leftP1: "",
      leftP2: "",
    };
  }

  componentDidMount() {
    fetch(
      "https://gist.githubusercontent.com/alexandrov-va/7f353ca822d074d7ce22d3af3d13696f/raw/0907091de6fedf6153cdb718f32a4215dc2c53cf/page.json"
    )
      .then((response) => response.json())
      .then((data) => {
        console.log(data);
        this.setState({
          leftTitle: data.components[1].metadata.components[0].metadata.title,
        });
        this.setState({
          col: data.components[1].metadata.components[0].col,
        });
        this.setState({
          leftP1: data.components[1].metadata.components[0].metadata.text,
        });
        this.setState({
          rightTitle: data.components[1].metadata.components[1].metadata.title,
        });
      })
      .catch((error) => console.error(error));
  }
  render() {
    return (
      <div>
        <div className="row">
          <div className={"col-" + this.state.col}>
            <h1>{this.state.leftTitle}</h1>
            <p>{this.state.leftP1}</p>
          </div>
          <div className={"col-" + this.state.col}>
            <h1>{this.state.rightTitle}</h1>
            <p>{this.state.leftP1}</p>
          </div>
        </div>
      </div>
    );
  }
}

export default About;
  • Вопрос задан
  • 82 просмотра
Решения вопроса 1
locky_yotun
@locky_yotun Куратор тега JavaScript
Я видел некоторый джаваскрипт
https://reactjs.org/docs/dom-elements.html#dangero...

И еще вот что:
componentDidMount() {
    const url = 'https://gist.githubusercontent.com/alexandrov-va/7f353ca822d074d7ce22d3af3d13696f/raw/0907091de6fedf6153cdb718f32a4215dc2c53cf/page.json';
    fetch(url)
        .then((response) => response.json())
        .then(data => {
            const componentMeta = data.components[1].metadata;
            this.setState({
                leftTitle: componentMeta.components[0].metadata.title,
                col: componentMeta.components[0].col,
                leftP1: componentMeta.components[0].metadata.text,
                rightTitle: componentMeta.components[1].metadata.title,
            });
        })
        .catch((error) => console.error(error));
}
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы