标签: react-jsx

有没有办法将jsx从组件的渲染功能移动到单独的文件？如果是这样,我如何在渲染函数中引用jsx？

我最近开始合作ReactJS.具体来说,我正在使用react-rails红宝石宝石和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永远不会被召唤.而是将onClick侦听器放在IconButton并引用ToggleIconButton::handleToggle.

我不想添加任何其他行为IconButton.我看待它的方式,不应该放置条件逻辑IconButton.它应该做的只是代表一个图标和按钮,而不必担心任何浏览器事件.这ToggleIconButton是为了什么.

虽然我知道我可以React Div …

SyntheticKeyboardEvent除了null事件属性之外,我无法让任何React 处理程序注册任何东西.

我已经将这个组件隔离在一个小提琴中,并得到与我的应用程序相同的结果.谁能看到我做错了什么？

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 />, document.body);

我理解如何(以及为什么)在JSX中添加空格,但我想知道什么是最佳实践或者是否有任何真正的区别？

将两个元素包裹在一个范围内

<div className="top-element-formatting">
  <span>Hello </span>
  <span className="second-word-formatting">World!</span>
</div>

将它们添加到一行

  <div className="top-element-formatting">
    Hello <span className="second-word-formatting">World!</span>
  </div>

用JS添加空间

<div className="top-element-formatting">
    Hello {" "}
    <span className="second-word-formatting">World!</span>
</div>

我正在尝试迭代哈希中的所有键,但是没有从循环返回输出.console.log()按预期输出.知道为什么JSX没有返回并输出正确吗？

var DynamicForm = React.createClass({
  getInitialState: function() {
    var items = {};
    items[1] = { name: '', populate_at: '', same_as: '', 
                 autocomplete_from: '', title: '' };
    items[2] = { name: '', populate_at: '', same_as: '', 
                 autocomplete_from: '', title: '' };
    return {  items  };
  },



  render: function() {
    return (
      <div>
      // {this.state.items.map(function(object, i){
      //  ^ This worked previously when items was an array.
        { Object.keys(this.state.items).forEach(function (key) {
          console.log('key: ', key);  // Returns key: 1 and key: 2 …

我有一个包含项目的数组,我想做这样的事情:

<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>封闭标签它不能正常工作.

在这里回答: 未捕获错误:不变违规:findComponentRoot(...,... $ 110):无法找到元素.这可能意味着DOM意外地发生了变异

<tbody>
    {rows.map(function (rowElement){
        return (<tr key={trKey++}>
        {rowElement.row.map(function(ball){
            console.log('trKey:'+trKey+' td1stKey'+td1stKey+' ball.value:'+ball.value+' td2ndKey:'+td2ndKey+' ball.count:'+ball.count);
            return(<div key={divKey++}>
                <td className='info' key={td1stKey++}>{ball.value}</td><td key={td2ndKey++}>{ball.count}</td>
            </div>);
        })}
        </tr>);
    })}
</tbody>

请告诉我如何正确包装少量TD标签! 我尝试使用指南Dynamic Children,但JSXTransformer不允许我这样做.

在Atom Editor中,我安装了以下插件

1. 棉短绒
2. 棉短绒,eslint

它们似乎无法识别JSX语法.

我有它在命令行上工作但必须使用像esprima-fb和的其他插件eslint-plugin-react.看起来Atom编辑器没有这样的插件,想知道你是否有人知道如何解决这个问题.

我在我的应用程序中使用React/JSX以实现我想要的,Lodash.

我需要根据条件重复一个元素一定次数,我该怎么做？

这是元素:

<span className="busterCards">?</span>;

我这样分配它:

    let card;
    if (data.hand === '8 or more cards') {
      card = <span className="busterCards">?</span>;
    }

所以在这种情况下,我需要重复8次元素.使用Lodash的过程应该是什么？

我希望能够在我的react/jsx代码中为html标签使用自动完成功能.它适用于html文件.我可以配置sublime text 3为jsx文件启用标签自动完成吗？

Visual Studio Code现在支持0.8版本的JSX,但看起来激活它的唯一方法是使用.jsx文件扩展名.列表中没有手动更改语言模式,最近的选项是JavaScriptReact,但它不解析JSX标记.

我在一个带有很多.jsJSX文件的项目中,我无法改变它.

有没有其他方法可以在没有.jsx扩展名的情况下使用JSX语法？