标签: codepen
Codepen 上未定义 React
我正在尝试在 CodePen 中运行基本的 React 组件（我启用了 Babel 并使用了 React.Component ），但它仍然无法渲染。在控制台中它显示 React not Defined。我还从另一个人那里获取了一些已经渲染的代码，但它不起作用！
class App extends React.Component {
constructor(props){
super(props);
this.state = {
term : ""
}
this.handleChange=this.handleChange.bind(this)
}
handleChange(event){
let term = event.target.value;
this.setState({term})
}
render() {
return (
<div className="App">
<input value={this.state.term} onChange={this.handleChange} />
{this.state.term}
</div>
);
}
}
ReactDOM.render(<App/> , document.getElementById("app"))
推荐指数
解决办法
查看次数
获取SVG路径的边界框
我想要这个页面做什么
http://codepen.io/netsi1964/full/vNoemp/
我有路径，需要知道它的边界框是一个rect元素，它是给定代码的x，y，宽度和高度
<path d="M147.5 55.8c-5.8-7.2-13.6-14.4-25.5-14.4-8.4 0-15.4 8.2-27 8.2-9 0-13-7.8-23-7.8C51.4 41.8 31 60.4 31 84.5c0 12.8 4.2 32.5 13.6 49.7C51 146.7 59.4 155 69 155c6.7 0 14.7-6.3 24.2-6.3 8.4 0 16.2 5.6 23.8 5.6 18 0 35-23.5 35-39.3 0-.8-.3-1.4-.3-2v-1c-11.8-6.3-18.2-15.7-18.2-29.3 0-11 4.8-20.5 13.6-26.7l.5-.2zm-53-8.8c13.7-4.2 26.3-14.4 26.3-32 0-1.5-.2-3.3-.4-5.3l-.2-.8C106.4 12.6 94 23.4 94 40.3c0 1.6.2 3.6.6 5.8v.8z" style="translate(0px,-212.47488403320312px) scale(1,1)" >
并了解rect属性
推荐指数
解决办法
查看次数
如何在CodePen中使用DateFNS？（dateFns 未定义）
我需要在 CodePen 中使用DateFNS但无法让它工作。错误：
“[Vue warn]：data() 中的错误：'ReferenceError：dateFns 未定义'（在 <Root> 中找到）”
这是我的示例 CodePen： https: //codepen.io/anon/pen/eKqxmd
<div id="app">
<v-app id="inspire">
<v-layout>
<v-flex xs12 sm6 offset-sm3>
<v-card>
<v-card-title primary-title>
<div>
<h3 class="headline mb-0">DATE {{ todaysDateMin }}</h3>
</div>
</v-card-title>
</v-card>
</v-flex>
</v-layout>
</v-app>
</div>
import { format } from 'date-fns'
new Vue({
el: '#app',
data () {
return {
todaysDateMin: dateFns.format(new Date(), '[Today is a] dddd')
}
}
})
推荐指数
解决办法
查看次数
如何让矩阵背景渲染在页面内容后面？
我想在我的 Web 应用程序中使用这个很酷的矩阵背景，但它涵盖了我的所有元素（div、标题、段落等）。
我尝试用 css 解决这个问题，但它不起作用。所以现在我陷入困境并请求你的帮助。
这是我来自 CodePen 的代码：
const canvas = document.getElementById('canv');
const ctx = canvas.getContext('2d');
const w = canvas.width = document.body.offsetWidth;
const h = canvas.height = document.body.offsetHeight;
const cols = Math.floor(w / 20) + 1;
const ypos = Array(cols).fill(0);
ctx.fillStyle = '#000';
ctx.fillRect(0, 0, w, h);
function matrix () {
ctx.fillStyle = '#0001';
ctx.fillRect(0, 0, w, h);
ctx.fillStyle = '#0f0';
ctx.font = '15pt monospace';
ypos.forEach((y, ind) => {
const text = String.fromCharCode(Math.random() * 128);
const x = ind …推荐指数
解决办法
查看次数
代码适用于Codepen,但不适用于我的桌面文件
我正在尝试使用index.html文件和script.js文件运行简单的几行代码,没有别的.
在HTML文件中,我有doctype html:
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="javascript/script.js"></script>
</head>
<body>
<div id="content1">This is content 1 </div>
<div id="content2">This is content 2 </div>
<div id="content3">This is content 3 </div>
</body>
</html>
对于我的javascript部分,我有:
var elems = $("div");
if (elems.length) {
var keep = Math.floor(Math.random() * elems.length);
for (var i = 0; i < elems.length; ++i) {
if (i !== keep) {
$(elems[i]).hide();
}
}
}
当我在CodePen中运行它,甚至在本网站上的代码编辑器中运行时,它运行正常.但是当我在桌面上使用这些文件时,它不起作用(index.html,script.js我相信文件夹结构是正确的(script.js在javascript文件夹中.)
谢谢你们
推荐指数
解决办法
查看次数
Vuetify 2.2，为什么我的页脚没有在 Code Pen 上的绝对底部对齐？
我有一个代码笔，这个代码笔里面有vuetify 2.2.15。
我使用页脚如下：
<div id="app">
<v-app>
<v-content>
<v-container>
<v-card>
<v-card-text>
Expected to align at bottom
</v-card-text>
</v-card>
</v-container>
<v-content>
<v-footer>
<v-col
class="text-center"
>
footer
</v-col>
</v-footer>
</v-app>
</div>
在网络上运行的实际代码中，该页脚在绝对底部对齐。但在代码笔中，页脚并不是在绝对底部对齐，而是相对地跟随前一个组件。
是否有任何我应该使用的缺失堆栈？谢谢你的建议。
推荐指数
解决办法
查看次数
ClassList切换不在React中工作.我究竟做错了什么？
我试图在点击它时让轮子图像旋转(CSS变换+过渡).现在,我只能在使用'img:active'按住鼠标按钮时旋转它.我已经找到了答案,并且通常会感觉我应该使用onClick来打开和关闭动画的类,但我似乎没有做得对.我究竟做错了什么？这是我的代码,供参考:
class Wheel extends React.Component
{
constructor(props){
super(props);
this.spin = this.spin.bind(this);
}
spin(e){
e.classList.toggle('rotate');
}
render(){
return (<div><img width="400" height="400" src="https://orig00.deviantart.net/0a38/f/2010/242/f/6/singapore_wheel_of_fortune_by_wheelgenius-d2xmb9v.jpg" onClick={this.spin}/>
</div>);
}
}
ReactDOM.render(
<Wheel/>,
document.getElementsByClassName('container-fluid')[0]
);
CSS:
.rotate {
-webkit-transform: rotate(1095deg);
-webkit-transition: -webkit-transform 3s ease-out;
}
/*
img:active {
-webkit-transform: rotate(1095deg);
-webkit-transition: -webkit-transform 3s ease-out;
}
*/
我已将所有内容放在CodePen上,网址为https://codepen.io/ejpg/pen/LmOVoR
先感谢您.
推荐指数
解决办法
查看次数
无法弄清楚为什么我的代码无法渲染
我正在尝试使用React构建一个简单的应用程序，并且正在使用Codepen。我无法渲染我的第一个组件，即使它是一个非常基本的代码并且对我来说看起来也是正确的。我包括了React，ReactDOM和Babel。该项目的html部分有一个id为“ =“ root”的div。以下代码不会渲染任何内容，我似乎也无法弄清楚原因。
class App extends React.Component {
render() {
return(
<div>Hello World</div>
);
}
}
ReactDOM.render(<App/>, document.getElementById("root"));
推荐指数
解决办法
查看次数
如何通过单击按钮在 CodePen 全页视图上重新加载网页
$("#quoteButton").on("click", function() {
location.reload();
});
我通过 NetBeans IDE 8.2 在 Free Code Camp 网站上的“随机报价机”上工作，这段代码运行良好，但是当我出于某种原因将它粘贴到 CodePen 时，它在 CodePen 全页视图上不起作用。无论如何，当我单击 CodePen 全页视图上的按钮时，是否可以重新加载页面？
在 CodePen 上的调试模式视图中，它正在工作。这是我的 CodePen 的链接：https ://codepen.io/NemStep/pen/pdmowz
推荐指数
解决办法
查看次数
标签 统计
codepen ×9
javascript ×5
reactjs ×3
html ×2
css ×1
date-fns ×1
footer ×1
intersection ×1
jquery ×1
svg ×1
vue.js ×1
vuetify.js ×1