眼镜代码幻灯片未呈现 [英] spectacle-code-slide not rendering

问题描述

我正在尝试使用眼镜代码-幻灯片进行演示.目前，我无法获得渲染任何内容的功能.这是我所做的:

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已克隆眼镜-样板

2将默认的/presentation/index.js替换为眼镜代码幻灯片的使用"部分中的代码，即(1)

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后跟npm install --save spectacle-code-slide.

4为(c3)添加了(1).

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

5然npm start.

我得到了:

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

已选中localhost:3000，并且只有空白页.没有其他错误的报告.发生了什么事?

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

推荐答案

好吧，您不能只替换整个文件.您应该只更改重要的部分render方法.并导入组件..
例如，如果您确实确实替换了整个文件，则您甚至都没有声明theme变量.

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..

您可以在此处看到工作示例
https://github.com/andrejunges/react-presentation/blob/master/presentation/index.js

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

这篇关于眼镜代码幻灯片未呈现的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！