小编Dmi*_*dov的帖子
类型'typeof __React'上不存在属性'render'
编译脚本时
/// <reference path="./typings/react/react.d.ts" />
import React = __React;
var content = <div>Hello, world!</div>;
React.render(content, document.getElementById('output'));
我收到一个错误
$ tsc --jsx react app.tsx
app.tsx(6,7): error TS2339: Property 'render' does not exist on type 'typeof __React'.
有没有办法解决它？谢谢
推荐指数
解决办法
查看次数
CSS3 + Javascript - 将-ms-transition:opacity 1s easy-in-out; 仅在IE 10中工作？
我今天一直在玩一些CSS3 + JavaScript.
下面你有我的代码,(试图制作世界上最小的图像淡入画廊,不知道我是否成功).
我不太确定如何设置CSS.请参阅以下评论问题:
-ms-transition:opacity 1s ease-in-out; // Will this allone work in IE 10?
transition:opacity 1s ease-in-out; // Why do we set this?
也许是世界上最小的JS-Gallery:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>HB - CSS3 + JS Gallery</title>
<meta charset="utf-8">
<style type="text/css">
body{margin:0;text-align:center;font:200px/500px georgia}
#g{background:#000;margin:0 auto;width:960px;height:500px;overflow:hidden}
#g div{
-webkit-transition:opacity 1s ease-in-out;
-moz-transition:opacity 1s ease-in-out;
-o-transition:opacity 1s ease-in-out;
-ms-transition:opacity 1s ease-in-out;
transition:opacity 1s ease-in-out;
opacity:0;position:absolute;height:500px;width:960px;}
</style>
</head>
<body>
<div id="g">
<div style="background:#090">1</div>
<div style="background:#096">2</div>
<div style="background:#963">3</div>
<div style="background:#CC0">4</div>
</div>
<script> …推荐指数
解决办法
查看次数
如何将子节点与JSX结合起来？
我想从li元素构建一个ul列表,但li元素将来自不同的来源,所以我不能在一个语句中这样做.看来JSX无法处理一组子元素,这给我一个语法错误:
var items = <li>S</li>
<li>S</li>
<li>S</li>;
理想情况下,我想做的事情如下:
var items1 = <li>S</li>
<li>S</li>
<li>S</li>;
var items2 = <li>S</li>
<li>S</li>
<li>S</li>;
var list = <ul>{items1}{items2}</ul>;
还有另一种方法来实现这一目标吗？
推荐指数
解决办法
查看次数
使用没有<script type ="text/jsx">标签的JSX？
我正在研究chrome扩展,特别是内容脚本功能,它将我的js注入网站.
由于我基本上只是使用注入的.js文件,我无法使这个声明看起来像jsx工作所必需的.
<script type="text/jsx">
/**@jsx React.DOM*/
有没有其他方法可以利用JSX？
推荐指数
解决办法
查看次数
React JSX"Parse Error:Unexpected identifier"
目前正在尝试学习React JS/JSX并且一直在创建一个简单的登录表单:
/**
* @jsx React.DOM
*/
var loginForm = React.createClass({
getInitialState: function() {
return {loggedIn : false};
},
login : function(event) {
alert('logging in');
},
logout : function(event) {
alert('logging out');
},
render: function() {
return (
<div>
<form /*action={this.server+'/login.php'}*/>
<label htmlFor="username">Username:</label>
<input type="text" id="username" name="username" />
<label htmlFor="password">Password:</label>
<input type="password" id="password" name="password" />
</form>
</div>
<div>
<button onClick={this.login}> Login </button>
<button onClick={this.logout}> Logout </button>
</div>
)
}
});
React.renderComponent(
<loginForm />,
document.body
);
如果我删除<button>标签它工作正常但否则会抛出错误:
Uncaught Error: …
推荐指数
解决办法
查看次数
JSX Converter使用React.createElement("h1",null)而不是React.DOM.h1(null)
JSX Transformer导致错误
当我使用react-tools的转换器转换我的反应文件时
$ jsx public/dev/jsx public/prod/js --no-cache-dir
或者当我用grunt-react转换时
$ grunt react
我的生产文件因转换使用React.createElement而中断,错误表明此函数未定义.
<h1>{this.state.title}</h1>
转换为:
React.createElement("div", null,
React.createElement("h1", null, this.state.title)
代替:
React.DOM.h1(null, this.state.title)
实时转换器工作正常,因为它使用React.DOM.h1(null, this.state.title).这行代码适用于react,但该React.createElement()函数不起作用且找不到.
如何强制我的自动转换器(JSX或grunt)转换为React.DOM.h1(null)而不是React.createElement(h1, null).为什么转换器使用此功能？
推荐指数
解决办法
查看次数
参考错误React
我试图ref使用React 使用该属性.我的浏览器出现了一个奇怪的错误,我无法弄清问题是什么.任何人都可以向我解释为什么我会收到此错误:
错误:不变违规:addComponentAsRefTo(...):只有ReactOwner可以有refs.这通常意味着您尝试将ref添加到没有所有者的组件(即,不是在另一个组件的
render方法内创建).尝试在一个新的顶级组件中渲染此组件,该组件将保存ref.
当我有这个代码时:
/**
* @jsx React.DOM
*/
(function(){
var react = require('react');
var App = react.createClass({
render: function() {
return (
<h1 ref="myRef">This is a test</h1>
);
}
});
react.render(
<App />,
document.body
);
}());
推荐指数
解决办法
查看次数
JSX编译器输出不是有效的JavaScript
我正在玩React,我遇到了离线JSX编译器的问题.
这是我的JSX代码,名为helloworld.js,放在我项目根目录下名为src的文件夹中:
/** @jsx React.DOM */
var Hello = React.createClass({
render: function () {
return <div>
<h3>Hello, {this.props.name}</h3>
</div>
}
});
React.renderComponent(
<Hello name={"Jane Doe"} />,
document.getElementById('example')
);
在命令行中,当我导航到项目的根目录并运行时:
jsx /src /build
输出文件helloworld.js在build文件夹中生成,但它不包含有效的JavaScript.
以下是内容的外观:
/** @jsx React.DOM */
var Hello = React.createClass({displayName: "Hello",
render: function () {
return <div>
<h3>Hello, {this.props.name}</h3>
</div>
}
});
React.renderComponent(
<Hello name={"Jane Doe"} />,
document.getElementById('example')
);
如您所见,它仍然包含内联HTML而不是有效的JavaScript.命令行中没有错误迹象.它看起来像这样:
built Module("helloworld")
["helloworld"]
有谁知道为什么会发生这种情况？
推荐指数
解决办法
查看次数
有关伊斯坦布尔JSX测试的代码覆盖率
我正在尝试检测我的代码以获得一些覆盖和运行,但是有些东西在我的手指上滑落.
我推出istanbul:
node_modules/.bin/istanbul cover ./node_modules/mocha/bin/_mocha -- -u exports -R spec
我mocha.opts看起来像这样:
app/assets/javascripts/components/**/*-mocha.jsx
--compilers jsx:mocha/compiler.js
一切似乎运行良好(测试运行,至少),但我得到的唯一报道是用于编译JSX到JavaScript的文件(用于 compiler.js
compiler.js 100%
jsx-stub-transform.js 65%
非常有用......
有任何想法吗？
推荐指数
解决办法
查看次数
ReactJS：JSX转换后的ascii艺术问题
我试图让我的React应用程序正确地渲染ascii艺术。
执行jsx-transformer后，我的作品失去了格式，并在浏览器中呈现出非常奇怪的效果
我的代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Hello World!</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.3/react.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.3/JSXTransformer.js"></script>
</head>
<body>
<div id="content"></div>
<script type="text/jsx">
var App = React.createClass({
render: function() {
return (
<pre>
<code>
+--------+ +-------+ +-------+
| | + ditaa + | |
| Text | +-------+ |diagram|
|Document| |!magic!| | |
| | | | | |
+---+----+ +-------+ +-------+
</code>
</pre>
);
}
});
var element = document.getElementById('content');
React.render(React.createElement(App), element);
</script>
</body>
</html>
输出：
如果我删除react并将pre代码块直接添加到html，一切正常。
我在这里做错什么吗？任何帮助表示赞赏...
更新1：我无法编辑ascii艺术。
更新2 …
推荐指数
解决办法
查看次数
标签 统计
react-jsx ×9
reactjs ×9
javascript ×5
ascii-art ×1
css3 ×1
gruntjs ×1
istanbul ×1
transitions ×1
typescript ×1