在 html 上反应 JSX答案

【问题标题】：React JSX on html在 html 上反应 JSX
【发布时间】：2020-06-18 15:47:04
【问题描述】：

我尝试在简单的 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);

【问题讨论】：

LikeButton组件要在哪里渲染

标签： html reactjs jsx

【解决方案1】：

所以您可能已经按照说明将 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);

【讨论】：