1

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

1 克隆的眼镜样板

2 将默认值替换/presentation/index.js为spectacle-code-slide的“Usage”部分的代码，即（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>
    );
  }
}

3npm 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，只有一个空白页。没有报告其他错误。到底是怎么回事？

4

1 回答 1

2

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

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

于 2016-06-14T01:33:01.967 回答