标签: react-jsx

有没有办法调试JSX文件？

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

我正在尝试突出显示与查询匹配的文本,但我无法弄清楚如何使标记显示为HTML而不是文本.

var Component = React.createClass({
    _highlightQuery: function(name, query) {
        var regex = new RegExp("(" + query + ")", "gi");
        return name.replace(regex, "<strong>$1</strong>");
    },
    render: function() {
        var name = "Javascript";
        var query = "java"
        return (
            <div>
                <input type="checkbox" /> {this._highlightQuery(name, query)}
            </div>
        );
    }
});

当前输出:<strong> Java </ strong>脚本

期望的输出:Java脚本

我正在尝试传递一个Handlebars模板,以便this.props.children使用以下JSX代码段进行处理:

<MyComponent>
  My address is {{address}}.
</MyComponent>

结果是Uncaught ReferenceError: address is not defined.

解决方法是使用类似的东西:

<MyComponent>
  <span content="My address is {{address}}."></span>
</MyComponent>

然后使用this.props.children.props.content.这是我发现基本上逃避{{address}}被JSX解释为插值的唯一方法.

有没有一种简单的方法来逃避JSX中的花括号？

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

我无法在反应代码中删除以下警告." className这里不允许属性".

• PhpStorm中的警告

• 未知的HTML标记属性不能设置为camelcase只保存小写,并且关闭检查没有帮助.

• 设置中 Languages & Frameworks > JavaScript > Libraries

你能帮助我吗？我对jsx中的每个属性都有警告.编辑器设置jsx和谐.

我有一个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.

问题

我正在使用babel 6进行反应JSX转换.但是我没有使用react预设,我只使用'transform-react-jsx'插件(并尝试使用strict-mode disable选项),这是我的.babelrc

{
  "plugins": [
    ["transform-react-jsx"]
  ],
  "sourceMaps": true,
  "strictMode": false
}

但是我需要一个使用'with'(我的控制之外)的第三方javascript,它会发出以下错误:[SyntaxError:foo.js:'with'in strict mode ..]

所以我需要禁用严格模式,这个问题和这个问题一样,但是我没有使用es6/es2015的东西,只有jsx转换.

有了babel 6,没有黑名单,我只指定了一个插件,所以我怀疑没有办法禁用.

我有一个名为的父组件App.js:

...

render() {
  return (
    <div>
      {React.cloneElement(this.props.children, this.props}
    </div>
  )
}

...

function mapDispatchToProps(dispatch) {
  return (
    actions: bindActionCreators(actions, 
  )
}

export default connect(
  ...,
  mapDispatchToProps
)(App)

道具将传递给每个组件.我想让每个组件都有自己的动作创建者文件,但是如何将所有动作创建者绑定到一个组件中,以便动作创建者可以从该App.js级别传递下去？任何其他建议也将受到赞赏,以便将动作创建者分解为每个组件.

这是迄今为止的结构:

ComponentOne
..actions.js //action creators
..ComponentOne.js
ComponentTwo
..actions.js //action creators
..ComponentTwo.js
App.js
actions.js//should I compile all the action creators here?

每个人actions.js都会这样做:

let actions = {
  logSayings() {
    ...
  }
}

export default actions

提前谢谢你,并将upvote /接受答复.

REDUX设置

store.js

import { applyMiddleware, compose, createStore } from 'redux' …

是的,我可能在这里错过了明显的但是我得到了一个'未捕获的TypeError:undefined不是一个函数'我似乎是.map()这是问题,但我不明白为什么.

var idealist = React.createClass({
loadCommentsFromServer: function() {
    $.ajax({
        url: this.props.url,
        dataType: 'json',
        success: function(data) {
            this.setState({data: data});
        }.bind(this)
    });
},
handleButtonClick: function(input) {
    // do stuff //
},
getInitialState: function() {
    return {data: []};
},
componentWillMount: function() {
    this.loadCommentsFromServer();
    setInterval(this.loadCommentsFromServer, this.props.pollInterval);
},
render: function() {
    var clickFunction = this.handleButtonClick;
    var ideas = this.state.data.map(function(i){
        return <ideabox data={i} onButtonClick={clickFunction} />;
    });
    return (
        <div className="idealist">
            {ideas}
        </div>
        );
}
});

React.renderComponent(
<idealist  url="/json/quotes.php"  pollInterval={2000}/>,
document.getElementById('quoteList')
);

如果我将其更改为var ideas = this.state.data我没有收到任何错误,JSON数据格式正确,可能出错？