spectacle-code-slide not rendering

大城市里の小女人 提交于 2019-12-20 04:18:37

问题


I am trying to use spectacle-code-slide for a presentation. Currently I have been unable to get it to render anything. Here is what I have done:

1 Cloned spectacle-boilerplate

2 Replaced the default /presentation/index.js with the code in the "Usage" section of spectacle-code-slide, namely (1)

import React from 'react';
import { Spectacle, Deck } from 'spectacle';
import CodeSlide from 'spectacle-code-slide';

export default class Presentation extends React.Component {
  render() {
    return (
      <Spectacle theme={theme}>
        <Deck transition={[]} transitionDuration={0} progress="bar">
          // ...
          <CodeSlide
            transition={[]}
            lang="js"
            code={require("raw!../assets/code.example")}
            ranges={[
              { loc: [0, 270], title: "Walking through some code" },
              { loc: [0, 1], title: "The Beginning" },
              { loc: [1, 2] },
              { loc: [1, 2], note: "Heres a note!" },
              { loc: [2, 3] },
              { loc: [4, 7] },
              { loc: [8, 10] },
              // ...
            ]}/>
          // ...
        </Deck>
      </Spectacle>
    );
  }
}

3 Ran npm install followed by npm install --save spectacle-code-slide.

4 Added (1) to assets/code.example.

5 Ran npm start.

I got:

Listening at http://localhost:3000
webpack built 966ffe50dc640fdaec4a in 4726ms

Checked localhost:3000 and there is only a blank page. No other errors are reported. What is going on?


回答1:


Well, you can't just replace that whole file. You should just change the section that matters, the render method. And import the components of course..
For example, if you really did replace the whole file, you don't even have the theme variable declared..

You can see an example of that working here
https://github.com/andrejunges/react-presentation/blob/master/presentation/index.js



来源:https://stackoverflow.com/questions/37800547/spectacle-code-slide-not-rendering

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!