ReactJS: динамически добавляйте теги и контент для реагирования и перезагрузите его - PullRequest
Новая
       19

ReactJS: динамически добавляйте теги и контент для реагирования и перезагрузите его

0 голосов
/ 05 ноября 2018

Я новичок в реагировании на JS и создаю презентацию реагирования с помощью спектакля . Содержание и количество слайдов для презентации заранее неизвестны. Поэтому основная идея заключается в том, что в начале приложение получает данные с сервера. Эти данные содержат содержание различных слайдов. Поскольку могут быть различные типы слайдов, также указывается шаблон. (В приложении уже определены 3 типа шаблонов).

Итак, что я сейчас делаю: я собираю данные и перебираю их. Я проверяю тип шаблона и создаю элемент Slide для каждого из них. Затем я добавляю элементы слайдов в колоду. Однако всякий раз, когда я пытаюсь получить колоду, она кажется пустой, и я ничего не могу добавить к ней. Следующим шагом было бы перезагрузить весь реактив с новым Deck-Content.

Кроме того, я думаю, что это определенно не способ сделать это, но я не знаю, как сделать это лучше. Итак, мой вопрос: я делаю это правильно? Есть ли способ лучше? Что я делаю не так?

Вот мой компонент: 

import React from 'react';
import { Deck, Slide } from 'spectacle';
// import createTheme from 'spectacle/lib/themes/default';
import Template1 from '../Templates/template#1/template1';
import Template2 from '../Templates/template#2/template2';
import Template3 from '../Templates/template#3/template3';
import ReactDOM from 'react-dom'

export default class FullDeck extends React.Component {

    constructor(props) {
        super(props);
        this.state = {
            title: null,
            text: null
        }
        const defaultBackground = 'https://blog.visme.co/wp-content/uploads/2017/07/50-Beautiful-and-Minimalist-Presentation-Backgrounds-08.jpg';
    }

   componentDidMount() {

    fetch(' http://localhost:3030/getSlides')
      .then(results => {
        return results.json()
      }).then(data => this.processResults(JSON.parse(data)));

    }

    processResults(data) {
        const slideDeck = document.getElementById('slideDeck');
        console.log(slideDeck)
        data.forEach(slide => {
            let element;

            if(slide.type === 'template1') {
                element = (
                    <Slide bgImage={slide.backgroundImg || this.defaultBackground}>
                        <Template1 title={slide.title} text={slide.text}></Template1>
                    </Slide>
                )
                slideDeck.append(element);
            } else if(slide.type === 'template2') {
                element = (
                    <Slide bgImage={slide.backgroundImg || this.defaultBackground}>
                        <Template2 title={slide.title} text={slide.text} slideImg={slide.img}></Template2>
                    </Slide>
                )
                slideDeck.append(element);
            } else if(slide.type === 'template3') {
                element = (
                    <Slide bgImage={slide.backgroundImg || this.defaultBackground}>
                        <Template3 title={slide.title} slideImg={slide.img}></Template3>
                    </Slide>
                )
                slideDeck.append(element);
            }
        })
        ReactDOM.render(slideDeck, document.getElementById('root'));
    }

    render() {
    const defaulText = "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. ";
    const slideImg = "https://cdn.worldvectorlogo.com/logos/some.svg";
        const graph = "https://www.mathsisfun.com/data/images/bar-graph-fruit.svg";

        return (
            <div id='root'>
              <Deck  id='slideDeck'>
              </Deck>
            </div>

        )
    }
}

1 Ответ

0 голосов
/ 05 ноября 2018

Вместо вызова ReactDOM.render внутри processResults, вы можете вызвать его вне компонента с самого начала, например, сохраняйте пустой массив slides в своем состоянии, пока ваш сетевой запрос не будет выполнен. Таким образом, вы можете поместить слайды data в состояние вашего компонента и извлечь JSX из этих данных в методе рендеринга.

Пример 

class FullDeck extends React.Component {
  state = {
    title: null,
    text: null,
    slides: []
  };

  componentDidMount() {
    fetch(" http://localhost:3030/getSlides")
      .then(response => response.json())
      .then(data => this.setState({ slides: data }));
  }

  render() {
    const { slides } = this.state;

    if (slides.length === 0) {
      return null;
    }
    return (
      <Deck>
        {slides.map((slide, index) => {
          if (slide.type === "template1") {
            return (
              <Slide
                key={index}
                bgImage={slide.backgroundImg || this.defaultBackground}
              >
                <Template1 title={slide.title} text={slide.text} />
              </Slide>
            );
          } else if (slide.type === "template2") {
            return (
              <Slide
                key={index}
                bgImage={slide.backgroundImg || this.defaultBackground}
              >
                <Template2
                  title={slide.title}
                  text={slide.text}
                  slideImg={slide.img}
                />
              </Slide>
            );
          } else if (slide.type === "template3") {
            return (
              <Slide
                key={index}
                bgImage={slide.backgroundImg || this.defaultBackground}
              >
                <Template3 title={slide.title} slideImg={slide.img} />
              </Slide>
            );
          }
        })}
      </Deck>
    );
  }
}

ReactDom.render(<FullDeck />, document.getElementById("root"));
...