小编Dmi*_*dov的帖子

我为下表定义了一个类名(作为JSX的一部分).
<table class="table">

但是,一旦显示该类未在表上设置:

var SearchResult = React.createClass({
       render: function(){
           return (
               <table class="table">
                   <thead>
                       <tr>
                           <th>Name</th>
                           <th>Address</th>
                       </tr>
                   </thead>
                   <tbody>...</tbody>
               </table>
           );
       }
    });

相反,表格显示<table data-reactid=".0.1.0.0">...</table>在Chrome中 - > inspect元素.

有没有办法调试JSX文件？

当我检查safari/chrome中的资源选项卡时,我无法看到.jsx文件.我们可以使用调试器吗？

我正在尝试使用多行字符串创建一个表,但我的表格未正确格式化该字符串.这是jsx:

<td>
  {arr.join('\n')}
</td>

这里是相应的html:

<td data-reactid=".xyz">Line 1
Line 2
Line 3
Line 4</td>

但在浏览器中它看起来像:

发生了什么,我如何让我的新线出现？

当我尝试将JSX代码编译成JS时,我收到Babel的错误.如果这是一个明显的问题,我是新来的,如此道歉,我无法找到任何与之相关的内容.我试图在这段代码中使用props,并将pageTitle prop传递给我的FieldContainer组件.这给了我一个问题,那就是不要让代码编译成JS.我在搜索中发现,道具值应该在两者之间传递{},但添加这些值并没有帮助.有任何想法吗？谢谢!

我有一个多维数组:一个results包含18个数组的数组row,每个数组包含6个数字.

我想把它渲染成一张桌子.逻辑是

results.each as (row)
     <tr>
         row.each as (number)
               <td>number</td>
     </tr>

但我无法弄清楚你是如何用JSX写的.

const Resultset = props => (
    {props.rows.map(rows => {
        <tr>
            {rows.map(number => <td>{number}</td>)}
        </tr>
    })}
);

但那不对.这是什么程序,如何嵌套地图调用和插值？

我有一个ReactJS组件:

var RegionsList = React.createClass({

    handleChange: function () {
        var regionId = this.refs.userRegions.getDOMNode().value;
        this.props.onRegionSelected(regionId);
    },

    componentDidMount: function() {
        $.get("/translation/activeuserregions", function(result) {
            if(this.isMounted()) {
                this.setState({
                    selectedRegionId: result.SelectedRegionId,
                    regions: result.Regions
                })
            }     
        }.bind(this));
    },

    getInitialState: function(props) {
        return {
            selectedRegionId: '',
            regions: []    
        }    
    },

    render: function() {
        return (
            <div id="RegionsListForm" className="navbar-form navbar-left regions-list">
                <div className="input-group navbar-searchbox">
                    <span className="input-group-addon">
                        <span>Region</span>
                    </span>
                    <select ref="userRegions" onChange={this.handleChange} defaultValue={this.state.selectedRegionId} className="form-control valid" id="region" name="region" aria-invalid="false">
                        {this.state.regions.map(function(region) {
                            return <option key={region.Id} value={region.Id} label={region.RegionName}>{region.RegionName}</option>        
                        })}                                             
                    </select> …

有没有办法在WebStorm中为.cjsx(coffeescript中的jsx)文件获取任何语法高亮？

目前,我正在使用Sublime插件,这很棒,但如果可能的话,我宁愿留在WebStorm中.我理解WebStorm支持TextMate包,所以这可能是一个可行的选择,但我找不到一个cjsx.

我在我的React app中使用了一个名为react-forms的库.为了更好地理解它是如何工作的,我一直在阅读代码,但是会出现一个令我困惑的常规.这是ES6/JSX代码:

'use strict';

var React = require('react/addons');
var cx = React.addons.classSet;

var Checkbox = React.createClass({

  propTypes: {
/...code.../
  },

  render(): ?ReactElement {
    /...code.../
  },

  onChange(e: {target: {checked: boolean}}) {
    /...code.../
  }
});

module.exports = Checkbox;

注意render(): ?ReactElement {}.这是令我困惑的部分.有人可以提供有关在何处学习此语法的更多信息的指导？我通过谷歌遇到了很多死路一条.

我想根据组件的状态在Button上设置disabled属性,如下所示:

render() {
  return (
    <button type="button" {this.state.submitting ? 'disabled' : ''} 
      onClick={ this.handleSubmit }>Submit</button>
    );
}

目前我在开场时遇到意外的令牌错误{,我错过了什么？

我在React面临一个非常讨厌的行为.我想使用上传从父组件到子组件的上下文getChildContext.只要我不在{this.props.children}渲染功能中使用,一切正常.如果我这样做,则子组件的上下文未定义.

我附加了一个重现此行为的代码示例.我无法弄清楚为什么bar组件的上下文字段Baz是undefined.

var Baz = React.createClass({
 contextTypes: {
   bar: React.PropTypes.any
 },
 render: function() {
   console.log(this.context);
   return <div />;
 }
});

var Bar = React.createClass({
 childContextTypes: {
   bar: React.PropTypes.any
 },

 getChildContext: function() {
   return {
     bar: "BAR"
   };
 },

 render: function() {
   return (<div>{this.props.children}</div>);
 }
});

var Foo = React.createClass({
 render: function() {
   return <Bar>
      <Baz />
   </Bar>;
 }
});

console.log(React.version);

React.render(<Foo />, document.body);

控制台输出:

Warning: owner-based and parent-based contexts differ …