Question

我正在尝试使用spectacle-code-slide进行演示。目前我无法让它呈现任何东西。这就是我所做的：

2使用＆＃34; Usage＆＃34;中的代码替换默认的/presentation/index.js。眼镜码幻灯片的一部分，即（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然后npm install后跟npm install --save spectacle-code-slide。

4将（1）添加到assets/code.example。

5跑npm start。

我得到了：

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

选中localhost:3000并且只有一个空白页面。没有报告其他错误。发生了什么事？

Answer 1

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

你可以看到一个在这里工作的例子 https://github.com/andrejunges/react-presentation/blob/master/presentation/index.js

眼镜代码幻灯片不渲染

1 个答案: