时间戳

首页 > 解决方案 > 在 html 上反应 JSX

html - 在 html 上反应 JSX

问题描述

我尝试在简单的 HTML 文件上插入反应。https://reactjs.org/docs/add-react-to-a-website.html#add-jsx-to-a-project上有一个官方示例，但我不明白如何呈现 JSX 编码组件以及如何将组件插入另一个组件：

class LikeButton extends React.Component {
  constructor(props) {
    super(props);
    this.state = { liked: false };
  }

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

    // Display a "Like" <button>
    return <button onClick={() => this.setState({ liked: true })}>Like</button>;
  }
}

const domContainer = document.querySelector("#like_button_container");
ReactDOM.render(LikeButton, domContainer);

标签： htmlreactjsjsx

解决方案

因此，您可能已经按照说明将 React 和 ReactDOM 导入 HTML：

<!-- depends where it's hosted -->
<script src="react.min.js"></script>
<script src="reactdom.min.js"></script>

然后将自定义 JS 添加到 HTML 中：

<!-- this goes right before the closing body tag -->
<script src="custom-like-button.js"></script>

最后，您将一个 HTML 元素放在您希望组件呈现的位置，并确保它的 id 与 React 示例末尾的 querySelector 匹配：

<div id="custom-like-button"></div>

至于嵌套组件，您可以将它们嵌套在顶级组件（被注入到 DOM 中的组件）的返回中

class MyComponent extends React.Component {
  render() {
    return <LikeButton />
  }
}
class LikeButton extends React.Component {
  render () {
    return <button onClick={() => this.setState({ liked: true })}>Like</button>;
  }
}
// goes inside <div id="my-component"></div> in html
const domContainer = document.querySelector("#my-component");
ReactDOM.render(MyComponent, domContainer);

推荐阅读