javascript - ReactJS:动态添加标签和内容到 react-dom 并重新加载它

Question

我是 reactJS 的新手，我正在 spectacle 的帮助下构建一个 React 应用程序演示文稿.事先不知道演示文稿的内容和幻灯片数量。因此，基本思路是应用程序一开始从服务器获取数据。此数据包含不同幻灯片的内容。由于可以有不同类型的幻灯片，因此也说明了一个模板。 (应用程序中已经定义了 3 种类型的模板)。

所以我现在正在做的是:我正在获取数据并迭代它们。我检查模板类型并为每个模板创建一个幻灯片元素。然后我将 Slide Elements 附加到 Deck。但是，每当我尝试获取 Deck 时，它似乎为空，我无法向其附加任何内容。下一步是用新的 Deck-Content 重新加载整个 react-dom。

此外，我认为这绝对不是这样做的方式，但我不知道如何做得更好。所以我的问题是:我做得对吗？有没有更好的办法？我做错了什么？

这是我的组件:

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>

        )
    }
}

Answer 1

与其在 processResults 中调用 ReactDOM.render，不如从一开始就在组件外部调用它，例如在您的网络请求完成之前，在您的状态中保留一个空的 slides 数组。通过这种方式，您可以将幻灯片 data 放入您的组件状态，并在 render 方法中从该数据派生 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"));