我对 reactJS 有点陌生,我正在借助spectacle构建一个 react 应用演示。演示文稿的内容和幻灯片数量事先不知道。因此,基本思想是应用程序在开始时从服务器获取数据。该数据包含不同幻灯片的内容。由于可能有不同类型的幻灯片,因此还说明了模板。(应用程序中已经定义了 3 种类型的模板)。
所以我现在正在做的是:我正在获取数据并迭代它们。我检查模板的类型并为每个模板创建一个幻灯片元素。然后我将幻灯片元素附加到甲板上。但是,每当我尝试获取 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>
)
}
}