javascript - 如何将 React 组件添加到由 HTML 和 CSS 组成的简单网页？

Question

我想创建一个简单的网页，显示用户可以滑过的轮播/图片库。

可以在 reactjsexample.com 上找到可用于执行此操作的 react 组件，此处为。

我已经阅读了“将 React 添加到网站”教程，但我无法弄清楚我需要编辑和保存哪些 JS 文件才能将其显示在网页上。

我尝试添加 react 和 react dom 开发脚本，

然后将以下内容添加到 Playground.js 文件中：

ReactDOM.render(e(ItemsCarouselPlayground), document.getElementById('page_contents'));

page_contents我的html页面中的div id在哪里。

但是，轮播仍然没有出现。

我觉得添加 React 组件可能比“将 React 添加到网站”教程中解释的要复杂得多。

如果有人可以帮助我弄清楚如何使用 reactjsexample.com 中的组件，将不胜感激。

谢谢！

标签： javascripthtmlcssreactjs

Answer 1

如果您密切关注本教程，您会发现它建立在一些“入门代码”之上。我在下面的屏幕截图中以红色概述了文档的相关部分。

也就是说，您的 Playground.js 文件应该看起来像这样：

'use strict';

const e = React.createElement;


// TODO: customise class
class ItemsCarouselPlayground extends React.Component {
  constructor(props) {
    super(props);
    this.state = { liked: false };
  }

  render() {
    if (this.state.liked) {
      return 'You liked this.';
    }

    return e(
      'button',
      { onClick: () => this.setState({ liked: true }) },
      'Like'
    );
  }
}

ReactDOM.render(e(ItemsCarouselPlayground), 
  document.getElementById('page_contents'));