按钮不能使用React在Codepen上渲染
基础概念
React 是一个用于构建用户界面的 JavaScript 库。它通过组件化的方式使得开发者能够高效地构建复杂的 UI。CodePen 是一个在线的代码编辑器，支持多种前端框架和库，包括 React。
可能的原因及解决方法
1. 检查 React 是否正确引入
确保在 CodePen 中正确引入了 React 和 ReactDOM。可以通过以下方式引入：
<script src="https://unpkg.com/react@17/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js" crossorigin></script>2. 检查组件是否正确编写
确保你的 React 组件正确编写并且导出。例如：
class Button extends React.Component {
render() {
return <button>Click me</button>;
}
}3. 检查 ReactDOM.render 方法
确保你在 CodePen 中正确使用了 ReactDOM.render 方法来渲染组件。例如：
ReactDOM.render(<Button />, document.getElementById('root'));4. 检查 HTML 结构
确保在 HTML 中有一个元素作为 React 组件的挂载点。例如：
<div id="root"></div>5. 检查 JavaScript 代码的执行顺序
确保 JavaScript 代码在 DOM 加载完成后执行。可以在 DOMContentLoaded 事件中执行代码：
document.addEventListener('DOMContentLoaded', function() {
ReactDOM.render(<Button />, document.getElementById('root'));
});示例代码
以下是一个完整的示例，展示了如何在 CodePen 上使用 React 渲染一个按钮：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>React Button Example</title>
<script src="https://unpkg.com/react@17/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js" crossorigin></script>
</head>
<body>
<div id="root"></div>
<script type="text/babel">
class Button extends React.Component {
render() {
return <button>Click me</button>;
}
}
document.addEventListener('DOMContentLoaded', function() {
ReactDOM.render(<Button />, document.getElementById('root'));
});
</script>
</body>
</html>参考链接
通过以上步骤，你应该能够在 CodePen 上成功渲染一个 React 按钮。如果仍然遇到问题，请检查控制台是否有错误信息，并根据错误信息进行调试。
相关·内容
我试图用React做一个计算器，但是我不能让渲染中的内容显示在页面上。它只显示了"display“div。class Calculator extends React.Component{ return ( );}
ReactDOM.render(<Calculator />, document.g
浏览 51提问于2020-02-03得票数 1
我正在做一个React挑战来创建一个计算器。我使用React功能组件呈现按钮，并计划使用CSS网格将它们放置在正确的位置。我直接渲染了一些按钮： const Equals = () => { = }; 我可以很容易地将它们放在CSS网格布局中的任何位置，使用 ..。但是我不能将任何用 ，如下所示： return ( {
numbers.map(
浏览 54提问于2021-03-01得票数 0
回答已采纳
在CodePen上使用React.js有一个非常简单的问题！我是React的新手，我正在尝试使用CodePen上的React库。由于某些原因，它似乎不能工作，即使我也使用Babel作为预处理器。我觉得这可能与我使用的版本有关？- 15.3.1
var React = require('react'
浏览 1提问于2016-11-02得票数 0
我有一个按钮，当点击它时，将文本的颜色更改为红色。或Codepen上都不工作。为什么这个普通的Javascript在Codepen/JSfiddle中不起作用呢？不涉及库(jQuery、React等)。我第一次想到的是在JSFiddle中，您可以在load类型的设置中设置一个属性。我将其设置为onLoad，但仍然没有工作。Codepen看起来并不能提供对此的控制。JSFiddle：
Codepen<
浏览 11提问于2017-05-08得票数 2
回答已采纳
1回答
我有两个React功能组件：C1和C2。Component 2</div>};
const [text, setText] = useState("Hello"); </button> {text} <MC2 />
浏览 9提问于2021-09-23得票数 0
回答已采纳
1回答
我正在尝试制作一个基于这个标记的react组件。我的组件如下所示： render(){ }但在渲染时，它会中断：
浏览 2提问于2015-07-25得票数 16
回答已采纳
模态组件使用Portal在页面上挂载和卸载，我使用react-transition-Group库中的CSSTransitionGroup对挂载和卸载进行动画处理。如果我为Portal使用一个基于类的组件，一切都可以正常工作。您可以在这里查看我的完整工作示例：https://codepen.io/jeffcap1/pen/eoQZgp 以下是作为类组件的Portal代码片段： const portalRoot = document.getE
浏览 26提问于2019-04-25得票数 1
回答已采纳
2回答
我刚开始使用react，并使用create-react-app作为起点。我有一个返回json数据的api。我使用端口3000上的节点服务器运行api。我还有默认的create-react-app设置，它使用端口3000启动应用程序。我想从我的api中获取数据，并在我的react应用程序中对其进行渲染。收到跨域请求导致无法检索数据的错误。在webpack中，这通常是如何处理的？
下面是我的代码，但我本
浏览 0提问于2016-11-16得票数 0
我是一个反应原生的初学者，目前正在尝试从firebase数据库中获取标记，并将它们渲染到我的地图上。我在状态变量中定义了初始markers对象。== row2,最后，使用react-native中的ListView进行渲染 dataSource={this.state.markers}这些标记根本不会渲染。此外，
浏览 3提问于2017-06-09得票数 1
回答已采纳
我在让React Fabric UI DetailsList与React Hooks一起工作时遇到了问题。它会呈现，但选择部分不会。每当您选择一行时，我希望选择的计数会被更新。然而，我没有看到这一点。现在确定是因为我使用了react钩子还是什么[Codepen]https://codepen.io/pen/?&editable=true (Example)
浏览 0提问于2019-07-26得票数 2
使用一些参数，我有一个React组件，它可能需要几秒钟来呈现，但如果它不是最新的，那么它根本不是问题。 为了防止UI冻结，我希望仅在用户未更改表单参数时才对其进行渲染。
浏览 17提问于2021-09-13得票数 1
我在我的react代码中使用highcharts进行趋势分析。在初始页面加载时，图表是空白的。用户可以在运行时添加任何类型的系列。在已添加系列的基础上，在图表中添加相应的y轴，最多可添加3个yaxis。我想打开一个模式对话框，在图表上为每个yaxis设置最小最大输入，并手动设置每个yaxis的最小最大值。React中有没有一种方法，当图表完全加载并添加了所有y轴时，我可以单击一个按钮并打开一个模式对
浏览 38提问于2019-03-19得票数 0
回答已采纳
我使用的是'react-multi-carousel‘。此旋转木马具有幻灯片数量的圆点。每个点实际上是一个具有名为[data-index='X']的数据属性的li元素，X是幻灯片编号。例如，在我的项目中，最后一张幻灯片是7，所以最后一个li元素有[data-index='7']，添加到其中的类是.react-multi-carousel-dot--active。到目前为止我只知道 [data-index='7'].react</
浏览 17提问于2020-10-31得票数 0
我想从这个CodePen贡献：http://codepen.io/daviddarnes/pen/VLXxMa获得我的网站按钮的CSS代码。按钮在我的网站上的HTML代码是：但在CodePen中是这样的：
<button class="button arrow"
浏览 2提问于2017-02-14得票数 1
回答已采纳
0回答
我正在使用react-native-sortable-listview通过拖放来更改列表项的顺序。只有拖动项被再次渲染，因此它的位置被更新，但其他项具有其先前的位置。当这个组件被其他原因重新渲染时，比如一些增量按钮，所有位置都是正确的。所以我的问题是，当我的react-native-sortable-list被呈现时，我如何再次呈现它。用forceUpdate()和this.setState()渲染的两种方式，我不能跟随，因为我不能更
浏览 3提问于2017-12-04得票数 0
当我在React Native上创建按钮并在Iphone上使用Expo应用程序时，这些按钮仅呈现为文本。我需要的按钮，以完全渲染与彩色背景和边界半径等。
浏览 9提问于2021-09-11得票数 0
我正在尝试观察当用户单击浏览器上一步按钮时React Router状态的变化。我的应用程序集成了redux Provider和Material-UI。</BrowserRouter> </Provider>, document.getElementById('root'));React v16
react-router
浏览 5提问于2018-02-14得票数 1
3回答
我有一个react组件，它有条件地呈现几个子组件。简化的代码就是： const component1 = condition ?我尝试在component2中添加一个key，但没有成功。
即使component1始终存在，并且我使用CSS将其上的标志更改为隐藏或不隐藏时，仍会发生编辑此操作:/
浏览 2提问于2016-05-27得票数 17
2回答
如何从项目中使用？我试过，在+page.svelte， import VANTA from "vanta";但不能以这种方式进口VANTA。编辑过的
感谢，我可以在我的SvelteKit页面中添加Vanta背景。然而，渲染
浏览 11提问于2022-10-28得票数 0
回答已采纳
2回答
我正在学习关于Udemy的React 16课程。我们正在使用Codepen在课程中创建我们的第一个React应用程序。虽然讲师能够渲染视频中的组件，但我遵循了他的代码，它没有渲染。
浏览 9提问于2018-08-31得票数 1
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
腾讯会议
实时音视频活动推荐
腾讯云开发者
