Tag: react jsx

未捕获错误:不变违例:findComponentRoot(…,… $ 110):无法find元素。 这可能意味着DOM意外地发生了变化

我在做什么错误的嵌套周期在React? 我在Googlesearch了信息,但没有find合适的信息。 你能帮我find,我明白错了吗? 从图中可以看出,我有一个variables的数据。 它工作正常。 但是当我添加一个值不是从这个<tr> ,错误出现! var TableBalls80 = React.createClass({ render:function(){ var rows = this.props.rows; var columnId = 0, trKey = 0, divKey = 0, td1stKey = 0; var td2ndKey = 100; return( <table className='table table-bordered bg-success'> <thead> <tr className='danger'> {rows[0].row.map(function (element){ columnId++; return ( <th colSpan="2" key={columnId}>{columnId}</th>); })} </tr> </thead> <tbody> {rows.map(function (rowElement){ […]

react.js – 要使用什么扩展名 – “.jsx”或者“.js”?

我只是想弄清楚什么是我的应用程序更好: 使用.jsx扩展,但是我将需要require('MyComponent.jsx'); 使用.js扩展名,这是很好的require('MyComponent); 但是我需要破解Sublime来正确地擦亮它们并突出显示语法。 你有什么经验?

ReactJS:“Uncaught SyntaxError:Unexpected token <”

我正在尝试在ReactJS中开始构build网站。 但是,当我试图把我的JS在一个单独的文件,我开始得到这个错误:“未捕获的SyntaxError:意外的令牌<”。 我尝试添加/** @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 […]

React.js:如何从JavaScript中分离出jsx

有没有办法将jsx从一个组件的渲染function移动到一个单独的文件? 如果是这样,我怎么在渲染函数中引用jsx?

如何configurationESLint在primefaces编辑器的反应

在Atom编辑器中,我安装了以下插件 棉短绒 棉短绒,eslint 看来他们不认识JSX语法。 我已经在命令行工作,但必须使用其他插件,如esprima-fb和eslint-plugin-react 。 看起来像Atom编辑器没有这样的插件,并想知道你是否有人知道一个方法来解决这个问题。

ReactJS:放置在子组件上时,onClick处理程序不会触发

我最近开始与ReactJS 。 具体来说,我正在使用react-rails ruby gem和react-bootstrap组件。 我有一个关于把onClick事件监听器放在子组件中的问题。 正如你可以从下面的代码示例看到的,我有一个父组件,在其render函数中“调用”一个子组件。 在这个render函数中,我有React onClick监听器,当它被点击时调用handleToggle 。 ###* @jsx React.DOM ### ToggleIconButton = React.createClass getInitialState: -> toggleOn: false handleToggle: (evt) -> this.setState(toggleOn: !this.state.toggleOn) render: -> `<IconButton onClick={this.handleToggle}>Toggle Button</IconButton>` IconButton = React.createClass render: -> # BsButton and BsGlyphicon are React-Bootstrap components `<BsButton> <BsGlyphicon glyph={this.props.glyph} /> {" " + this.props.text} </BsButton>` 不幸的是,这不符合我的想法。 ToggleIconButton::handleToggle永远不会被调用。 相反, […]

反应:键盘事件处理程序所有'空'

我无法让任何React SyntheticKeyboardEvent处理程序为事件属性注册除null之外的任何内容。 我已经在小提琴中孤立了组件,并得到了与我的应用程序相同的结果。 任何人都可以看到我做错了什么? http://jsfiddle.net/kb3gN/1405/ var Hello = React.createClass({ render: function() { return ( <div> <p contentEditable="true" onKeyDown={this.handleKeyDown} onKeyUp={this.handleKeyUp} onKeyPress={this.handleKeyPress}>Foobar</p> <textarea onKeyDown={this.handleKeyDown} onKeyUp={this.handleKeyUp} onKeyPress={this.handleKeyPress}> </textarea> <div> <input type="text" name="foo" onKeyDown={this.handleKeyDown} onKeyUp={this.handleKeyUp} onKeyPress={this.handleKeyPress} /> </div> </div> ); }, handleKeyDown: function(e) { console.log(e); }, handleKeyUp: function(e) { console.log(e); }, handleKeyPress: function(e) { console.log(e); } }); React.renderComponent(<Hello />, […]

如何渲染重复元素?

我已经写了一些代码来渲染ReactJS中的重复元素,但我讨厌它是多么的丑陋。 render: function(){ var titles = this.props.titles.map(function(title) { return <th>{title}</th>; }); var rows = this.props.rows.map(function(row) { var cells = []; for (var i in row) { cells.push(<td>{row[i]}</td>); } return <tr>{cells}</tr>; }); return ( <table className="MyClassName"> <thead> <tr>{titles}</tr> </thead> <tbody>{rows}</tbody> </table> ); } 有没有更好的方法来实现这一目标? (我想在模板代码中embedded循环,或者类似的方法)。

如何正确包装less量的JSXTransformer的TD标签?

我有一个数组与项目,我想这样做: <tr> (until have items in array <td></td><td></td>) </tr> 但是,如果我这样做,我得到一个JSXTransformer错误: 相邻的XJS元素必须包裹在封闭的标签中 工作版本: {rows.map(function (rowElement){ return (<tr key={trKey++}> <td className='info' key={td1stKey++}>{rowElement.row[0].value}</td><td key={td2ndKey++}>{rowElement.row[0].count}</td> <td className='info' key={td1stKey++}>{rowElement.row[1].value}</td><td key={td2ndKey++}>{rowElement.row[1].count}</td> <td className='info' key={td1stKey++}>{rowElement.row[2].value}</td><td key={td2ndKey++}>{rowElement.row[2].count}</td> <td className='info' key={td1stKey++}>{rowElement.row[3].value}</td><td key={td2ndKey++}>{rowElement.row[3].count}</td> <td className='info' key={td1stKey++}>{rowElement.row[4].value}</td><td key={td2ndKey++}>{rowElement.row[4].count}</td> ……. </tr>); })} 我试过这个 但是用<div>标签,它不能正常工作。 在这里回答: Uncaught错误:不变违规:findComponentRoot(…,… $ 110):无法find元素。 这可能意味着DOM意外地发生了变化 <tbody> {rows.map(function (rowElement){ return (<tr key={trKey++}> {rowElement.row.map(function(ball){ console.log('trKey:'+trKey+' […]

jsx和React中的dynamic标签名称

我尝试写一个React组件。 用于html标题标签(h1,h2,h3等),其中标题优先级根据我们在道具中定义的优先级dynamic改变。 这里我试着去做。 <h{this.props.priority}>Hello</h{this.props.priority}> 预期产出: <h1>Hello</h1> 这不起作用。 有没有可能的方法来做到这一点?