Question

我开始使用Reactjs并且在运行演示时遇到了一些麻烦。如果您有兴趣，我有整个项目open sourced。

我有一个包含SearchForm的searchBox。用户发布搜索后，SearchResult应显示服务器的json。

React.render(
    <SearchBox url="http://127.0.0.1:5000/search"/>,
    document.getElementById('search-golden-facilities')
);

var SearchBox = React.createClass({
    handleSearchSubmit: function(search_param){
        $.ajax({
            url: this.props.url,
            dataType: 'json',
            type: 'POST',
            data: search_param,
            success: function(data){
                this.setState({data:data});
            }.bind(this),
            error: function (xhr, status, err) {
                console.error(this.props.url, status, err.toString());
            }.bind(this)
        });
    },
    getInitialState: function () {
        return {data: [{"x": "huh"}]};
    },
    render: function(){
        return (
            <div className="searchBox">
                SID <SearchForm onSearchSubmit={this.handleSearchSubmit} />
            </div>
        )
    }
});

var SearchForm = React.createClass({
    handleSubmit: function (e) {
        e.preventDefault();
        var sid = this.refs.sid.getDOMNode().value.trim();
        if(!sid) {
            return;
        }
        this.props.onSearchSubmit({sid: sid});
        this.refs.sid.getDOMNode().value = '';
        return;
    },
    render: function () {
        return (
            <form className="searchForm" onSubmit={this.handleSubmit}>
                <input type="search" placeholder="Enter SID" ref="sid"/>
                <input type="submit" value="Search"/>
            </form>
        );
    }
});

有问题的地方是SearchResult：

React.render(
    <SearchResult data='{"x":"test"}'/>,
    document.getElementById('result-golden-facilities')
);

var SearchResult = React.createClass({
   render: function(){
       var resultRows = this.props.data.map(function(result){
           return (
                <p>{result.x}</p>
           );
       });
       return (
           <div className="searchResult">
                {resultRows}
           </div>
       );
   }
});

我在Chrome控制台中收到了javascript错误：

未捕获的TypeError：undefined不是函数

data似乎未定义。我不明白为什么，因为我在初始状态下定义它。

var resultRows = this.props.data.map(function(result){

有什么建议吗？

Answer 1

当您使用单引号包装属性时，React将它们作为字符串发送到组件。最好使用{：

React.render(
    <SearchResult data={ {"x":"test"} } />,
    document.getElementById('result-golden-facilities')
);

或为了更好的可读性：

var data = { x: 'test' };
React.render(
    <SearchResult data={ data } />,
    document.getElementById('result-golden-facilities')
);

您的代码中的另一个问题是您如何使用.map()。您正尝试在对象上使用本机javascript映射方法，该方法不存在。您应该将数据更改为数组：

var data = [{ x: 'test' }];

或简单渲染：

var SearchResult = React.createClass({
   render: function(){
       return (
           <div className="searchResult">
                {this.props.data.x}
           </div>
       );
   }
});

如何将道具传递给组件？

1 个答案: