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> 这不起作用。有没有可能的方法来做到这一点？