标签: react-jsx

我正在尝试新的react-router 1.0.0而且我收到了一些我无法解释的奇怪警告:

警告:propType失败:提供给`Route`的无效prop`组件`.

警告:提供给`Route`的未定义的`component`无效.

该应用很简单:

import React from 'react';
import ReactDOM from 'react-dom';
import { Router, Route } from 'react-router';

import App from './components/app';

var Speaker = require('./components/speaker');

ReactDOM.render((
    <Router>
      <Route path="/" component={App}>
        // This is the source of the warning:
        <Route path="speaker" component={ Speaker }/>
      </Route>
    </Router>
), document.getElementById('react-container'));

speaker.jsx:

import React from 'react';

var Speaker = React.createClass({
  render() {
    return (
        <h1>Speaker</h1>
    )
  }
});

module.exoprts = Speaker;

app.jsx只有以下render()函数:

render() {
    return (
        <div>
            <Header title={this.state.title} status={this.state.status} /> …

我是ES6和React的新手,我一直在看箭头功能.为什么有些箭头函数在胖箭头之后使用花括号而有些使用括号？例如:

const foo = (params) => (
    <span>
        <p>Content</p>
    </span>
);

与

const handleBar = (e) => {
    e.preventDefault();
    dispatch('logout');
};

谢谢你的帮助!

在Reactjs中创建具有输入字段的组件时会发生错误 Error: Parse Error: Line 47: Expected corresponding JSX closing tag for input at http://localhost/chat-react/src/script.js:47:20 </div>

var Main = React.createClass({
    render: function() {
        return (
            <div className="card-action">
                <i class="mdi-action-account-circle prefix"></i>
                <input id="icon_prefix" type="text" class="validate">
            </div>
        );
    }
});

如何使用React.DOM更改HTML上的样式body？

我试过这段代码而且它不起作用:

var MyView = React.createClass({
  render: function() {
    return (
      <div>
        React.DOM.body.style.backgroundColor = "green";
        Stuff goes here.
      </div>
    );
  }
});

如果你从浏览器控制台执行它,它可以工作(但我需要它在ReactJS代码中工作): document.body.style.backgroundColor = "green";

另请参阅此问题以获得类似但不同的解决方案: 使用ReactJS和React Router更改每个路径的页面背景颜色？

我在React的嵌套循环中做错了什么？我在谷歌搜索过信息,但没有找到合适的信息.你能帮我找到,我理解错了吗？

从图中可以看出,我在变量中有数据.它工作正常.但是当我添加一个不是从这个值的值时<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){
                                        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>
                            </table>);
        }
    });

错误(取决于从另一个项目添加的项目<tr>):

未捕获错误:不变违规:findComponentRoot(...,.0.1.1.0.2.0.0.1.$ 0. …

JSX代表什么？

我指的是定义为ECMAScript的类似XML的语法扩展的JSX,它随着ReactJS的日益普及而变得非常流行.

在我的React组件中,我有一个按钮,用于在单击时通过AJAX发送一些数据.我只需要第一次发生,即在第一次使用后禁用按钮.

我是怎么做的:

var UploadArea = React.createClass({

  getInitialState() {
    return {
      showUploadButton: true
    };
  },

  disableUploadButton(callback) {
    this.setState({ showUploadButton: false }, callback);
  },

  // This was simpler before I started trying everything I could think of
  onClickUploadFile() {
    if (!this.state.showUploadButton) {
      return;
    }
    this.disableUploadButton(function() {
      $.ajax({
        [...]
      });

    });
  },

  render() {
    var uploadButton;
    if (this.state.showUploadButton) {
      uploadButton = (
        <button onClick={this.onClickUploadFile}>Send</button>
      );
    }

    return (
      <div>
        {uploadButton}
      </div>
    );
  }

});

我认为发生的是状态变量showUploadButton没有立即更新,React docs所说的是预期的.

我怎么能强制按钮被禁用或在点击它的瞬间全部消失？

例如,我想显示一个名单.所以我想做这样的事情:

var returnValue;
for (eachName of _names) {
  returnValue += (
  <TouchableHighlight
    onPress={() => this._onPressButton}>
      <Text>
      {eachName}
      </Text>
  </TouchableHighlight>);
}
return returnValue;

但是,这是无效的.这让我想到了一个问题:如何在React Native中连接动态数量的JSX组件.

我试图在JSX中呈现布尔值,但是React正在将其作为表达式进行评估,并且在返回组件后不返回任何内容.

有什么解决方法吗？

这是一个例子

var ipsumText = true;

ReactDOM.render(
  <div>
     Boolean Value:    {ipsumText}
  </div>,
  document.getElementById('impl')
);

只是将编译后的HTML显示为

<div data-reactid=".0"><span data-reactid=".0.0">Boolean Value:    </span></div>

编辑:这是示例http://jsbin.com/nibihodoce/1/edit?html,js,output的JSBin链接

编辑2:我已经探索过.toString()替代方案,但是因为我正在迭代一个对象数组,并且该对象的特定字段可以具有字符串/整数/布尔类型的值.将.toString()应用于所有'em似乎不是最佳的.

我正在尝试输出逗号分隔链接列表,这是我的解决方案.

var Item = React.createComponent({
  render: function() {

    var tags = [],
        tag;

    for (var i = 0, l = item.tags.length; i < l; i++) {
      if (i === item.tags.length - 1) {
        tag = <span><Tag key={i} tag={item.tags[i]} /></span>;
      } else {
        tag = <span><Tag key={i} tag={item.tags[i]} /><span>, </span></span>;
      }
      tags.push(tag);
    }

    return (
      <tr>
        <td>
          {item.name}
        </td>
        <td>
          {tags}
        </td>
      </tr>
    );

  }
});

我只是想知道是否有更好,更干净的方法来实现这一目标？

谢谢