标签: react-jsx
jsx和React中的动态标记名称
我尝试编写一个React组件.对于html标题标签(h1,h2,h3等),其中标题优先级根据我们在props中定义的优先级动态变化.
这就是我尝试做的事情.
<h{this.props.priority}>Hello</h{this.props.priority}>
预期产量:
<h1>Hello</h1>
这不起作用.有没有可行的方法来做到这一点？
推荐指数
解决办法
查看次数
React/JSX动态组件名称
我试图根据其类型动态呈现组件.
例如:
var type = "Example";
var ComponentName = type + "Component";
return <ComponentName />;
// Returns <examplecomponent /> instead of <ExampleComponent />
我尝试了这里提出的解决方案React/JSX动态组件名称
这在编译时给了我一个错误(使用browserify for gulp).它期望我使用数组语法的XML.
我可以通过为每个组件创建一个方法来解决这个问题:
newExampleComponent() {
return <ExampleComponent />;
}
newComponent(type) {
return this["new" + type + "Component"]();
}
但这对我创建的每个组件都意味着一种新方法.必须有一个更优雅的解决方案来解决这个问题.
我对建议很开放.
推荐指数
解决办法
查看次数
警告:未知的DOM属性类.你的意思是className吗？
我刚刚开始探索React,通过添加一个具有简单渲染功能的组件:
render() {
return <div class="myApp"></div>
}
当我运行应用程序时,我收到以下错误:
Warning: Unknown DOM property class. Did you mean className?
我可以通过改变class来解决这个问题className.
问题是; React会执行这个约定吗？另外为什么我需要使用className而不是传统的class？如果这是一个限制,那么它是由于JSX语法还是其他地方？
推荐指数
解决办法
查看次数
ReactJS:"Uncaught SyntaxError:Unexpected token <"
我正在尝试开始在ReactJS中构建一个站点.但是,当我试图将我的JS放在一个单独的文件中时,我开始收到此错误:"Uncaught SyntaxError:Unexpected token <".
我尝试添加/** @jsx React.DOM */到JS文件的顶部,但它没有修复任何东西.下面是HTML和JS文件.什么是错的任何想法？
HTML
<html>
<head>
<title>Page</title>
<script src="http://fb.me/react-0.12.2.js"></script>
<script src="http://fb.me/JSXTransformer-0.12.2.js"></script>
<script src="http://code.jquery.com/jquery-1.10.0.min.js"> </script>
<script src="./lander.js"> </script>
</head>
<body>
<div id="content"></div>
<script type="text/jsx">
React.render(
<Lander />,
document.getElementById('content')
);
</script>
</body>
</html>
JS
/**
* @jsx React.DOM
*/
var Lander = React.createClass({
render: function () {
var info = "Lorem ipsum dolor sit amet... ";
return(
<div>
<div className="info">{info}</div>
</div>
);
}
});
编辑:我意识到我需要添加type="text/jsx"包含我的着陆器代码的脚本标签.但是,添加此内容并重新加载后,我收到此警告
"您正在使用浏览器内的JSX转换器.请务必预编译您的JSX以进行生产 - http://facebook.github.io/react/docs/tooling-integration.html#jsx "
然后是这个错误:
"XMLHttpRequest无法加载file:///Users/.../lander.js.交叉源请求仅支持协议方案:http,数据,chrome扩展,https,chrome-extension-resource."
为了让浏览器jsx转换工作,我似乎还需要做一些事情,但我不确定它是什么.
编辑:OOOOH我需要使用MAMP或其他什么东道主？
推荐指数
解决办法
查看次数
是否有用于崇高文本的JSX格式化程序？
我正在使用Sublime Text作为文本编辑器.
有一个jsFormat用于格式化javascript文件,但我找不到一个JSX.
你们如何处理格式化JSX？
推荐指数
解决办法
查看次数
React JSX文件给出错误"无法读取未定义的属性'createElement'"
我有一个运行的文件test_stuff.js npm test
它几乎看起来像这样:
import { assert } from 'assert';
import { MyProvider } from '../src/index';
import { React } from 'react';
const myProvider = (
<MyProvider>
</MyProvider>
);
describe('Array', function() {
describe('#indexOf()', function() {
it('should return -1 when the value is not present', function() {
assert.equal(-1, [1,2,3].indexOf(4));
});
});
});
不幸的是,我收到了错误
/Users/me/projects/myproj/test/test_stuff.js:11
var myProvider = _react.React.createElement(_index.MyProvider, null);
^
TypeError: Cannot read property 'createElement' of undefined
at Object.<anonymous> (/Users/me/projects/myproj/test/test_stuff.js:7:7)
那是什么意思？我正在成功地从'react'导入React,为什么React会被取消定义？它是_react.React,无论那意味着什么......
推荐指数
解决办法
查看次数
在reactjs中收听按键以获取文档
我想绑定以关闭活动反应引导弹出窗口.这escape是代码
_handleEscKey:function(event){
console.log(event);
if(event.keyCode == 27){
this.state.activePopover.hide();
}
},
componentWillMount:function(){
BannerDataStore.addChangeListener(this._onchange);
document.addEventListener("click", this._handleDocumentClick, false);
document.addEventListener("keyPress", this._handleEscKey, false);
},
componentWillUnmount: function() {
BannerDataStore.removeChangeListener(this._onchange);
document.removeEventListener("click", this._handleDocumentClick, false);
document.removeEventListener("keyPress", this._handleEscKey, false);
},
但是当我按任意键时,没有任何东西被记录在控制台中.我试图在窗口上也听不到这种情况."按键","键盘"等但似乎我做错了.
推荐指数
解决办法
查看次数
Visual Studio 2015 JSX/ES2015语法高亮显示
如何在Visual Studio 2015 for JSX中使用ES2015代码获得正确的语法突出显示？
如果我删除import和export关键字,它工作正常:
我刚刚更新到Visual Studio 2015 Enterprise Update 1,但它仍然保持不变.
推荐指数
解决办法
查看次数
在Sublime Text 3中,如何为JSX文件启用Emmet？
我以前一直在使用Allan Hortle的JSX软件包,直到我遇到了处理语法高亮的问题.然后我注意到有一个官方包,崇高反应.
通过Allan Hortle的软件包,他在Preferences > Key Bindings – User启用Emmet功能中包含了一个片段,如下所示:
{
"keys": ["tab"],
"command": "expand_abbreviation_by_tab",
"context": [
{
"operand": "source.js.jsx",
"operator": "equal",
"match_all": true,
"key": "selector"
}
]
}
此代码段似乎不适用于官方的sublime-react包.这似乎是用键绑定修改的东西,但Sublime文档的初步细读并未对该主题产生任何影响.救命？
推荐指数
解决办法
查看次数
如何在ReactJS中手动触发click事件？
如何在ReactJS中手动触发单击事件？当用户点击element1时,我想自动触发input标签上的点击.
<div className="div-margins logoContainer">
<div id="element1" className="content" onClick={this.uploadLogoIcon}>
<div className="logoBlank" />
</div>
<input accept="image/*" type="file" className="hide"/>
</div>
推荐指数
解决办法
查看次数
标签 统计
react-jsx ×10
reactjs ×8
javascript ×4
html ×2
ecmascript-6 ×1
emmet ×1
intellisense ×1
node.js ×1
npm ×1
sublimetext ×1
sublimetext3 ×1