时间戳

首页 > 解决方案 > 如何将 ReactJS 组件添加到我的项目中？

reactjs - 如何将 ReactJS 组件添加到我的项目中？

问题描述

我在 .jsx 文件中创建了一个 ReactJS 组件。阅读并按照 ReactJS.org 此处 添加 React的指示执行步骤后，在我的代码中没有发现任何程序错误或语法错误，ReactJS 组件仍然没有出现在我的网页中。

如果我的 .jsx 文件和 .html 文件中也没有语法错误或编程错误，并且如果我正确遵循了 3 个步骤，那么这是否意味着我应该完成其他步骤但我不知道它们？

如果是这样，这些步骤是什么？

我自己的猜测是我应该在index.js和app.js文件中进行一些编辑，不是吗？

注意：我不知道如何添加 ReactJS 组件，除了 ReactJS.org 在上面的链接中写的 3 个步骤。我应该怎么办？

这是我的 .jsx 文件（名为 reactcounter.jsx）

import React, {Component} from "react";

const e = React.createElement;

class ReactCounter extends Component
{

state =
{

counter = 0,

}

badgeColours()
{

var colours = "badge badge-pill badge-";

colours += this.state.counter === 0 ? " warning" : "primary";

return colours;

}

addButton = () => {

return this.setState({counter: this.state.counter + 1});

}

removeButton = () => {

return this.state.counter >= 1 ? this.setState({counter: this.state.counter - 1}) : null;

}

render e()
{

return (

<span className={this.badgeColours()}>{this.state.counter}</span>

<button onClick={this.addButton} className=" btn btn-success">Add</button>

<button onClick={this.removeButton} className=" btn btn-danger">Remove</button>

)

}

}

export default ReactCounter;

const domContainer = document.querySelector("#ReactCounterExample");
ReactDOM.render(e(ReactCounter), domContainer);

和我的 .html 文件

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8"/>
<title>ReactJS Component</title>
</head>
<body>

<div id="ReactCounterExample"></div>

<script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>
<script src="reactcounter.jsx"></script>
</body>
</html>

标签： reactjs

解决方案

推荐阅读