0

我在一个 .jsx 文件中完成了所有工作，但我迷失在那个长文件中。所以我把所有东西都分成了多个 .jsx 并使用 browserify/watchify 转换为 .js

    watchify -t reactify marek.jsx -o 'exorcist bundle.js.map > bundle.js' -d -v

现在我得到：

    TypeError: props is undefined in Firefox
    Uncaught TypeError: Cannot read property 'href' of undefined in Chrome

对于线路：

    ListGroup.js:75
    return props.href || props.onClick;

我做错了什么？

bundle.jsx
       var React = require('react/addons');
       var Adresy = require('./Adresy.jsx');

        var App = React.createClass({
       displayName: "App",

       getInitialState: function() {
       return {data: []};
       },

       loadCommentsFromServer: function() {
       $.ajax({
       url: this.props.url,
       dataType: 'json',
       success: function(data) {
       this.setState({data: data});
      }.bind(this),
      error: function(xhr, status, err)
        {console.error(this.props.url,status, err.toString());
        }.bind(this)});
       },

       componentDidMount: function() {
       this.loadCommentsFromServer();
       setInterval(this.loadCommentsFromServer, this.props.pollInterval);
       },

       render: function() {
          return (
       <div className="container">

       <div className="row">
       <div className="col-md-6">
       <Adresy data={this.state.data.adresy}/>
       </div> 
       </div>
       </div>
       );
       }
       });
       React.render(
       <App url={res} pollInterval={20000} />,
       document.getElementById("content")
       );

Adresy.jsx

       var React = require('react');

       var Panel = require('react-bootstrap/lib/Panel');
       var ListGroup = require('react-bootstrap/lib/ListGroup');
       var ListGroupItem = require('react-bootstrap/lib/ListGroupItem');
       var ButtonToolbar = require('react-bootstrap/lib/ButtonToolbar');
       var ButtonGroup = require('react-bootstrap/lib/ButtonGroup');


       var Adresy = React.createClass({

           getInitialState: function() {
             return {data: []};
           },

           getDefaultProps: function() {
           return {data: []};
           },

         render: function() {
           return (
             <Panel collapsible defaultCollapsed header='Adresy' className="TTemplate">
               <ListGroup fill>
                 {
                 this.props.data.map(function(value) {
                   return
                     <ListGroupItem key={value.adres_id} >
                       <div className="row">
                                     <div className="col-md-6">
                                       <p>{value.st}</p>

                </div>
              </ListGroupItem>
            })
          }
              </ListGroup>
             </Panel>
           );
         }
       });

       module.exports = Adresy;
4

1 回答 1

1

您提到此代码是自动生成的，但格式看起来很不正确。您发布的代码中有一个错误，但我不确定它是复制/粘贴/格式化的事情，还是您的代码中确实有问题：

           <ListGroup fill>
             {
             this.props.data.map(function(value) {
               return
                 <ListGroupItem key={value.adres_id} >
                   <div className="row">
                                 <div className="col-md-6">
                                   <p>{value.st}</p>

            </div>
          </ListGroupItem>
        })
      }
          </ListGroup>

该map函数将返回undefined，因为return它本身就在一行上：

function test() {
  return
    "testing";
}

alert(test());

此外，我认为显示的代码甚至不会执行；如果你对齐缩进，你会看到你缺少一个结束</div>JSX 标记：

<ListGroup fill>
{this.props.data.map(function(value) {
  return (
    <ListGroupItem key={value.adres_id} >
      <div className="row">
        <div className="col-md-6">
          <p>{value.st}</p>
        </div>
      {/* missing div here */}
    </ListGroupItem>
  );
})}
</ListGroup>

我怀疑其中一个问题或相关问题导致ListGroup无法获得正确的children属性，导致其isAnchor方法失败：

isAnchor(props){
  return (props.href || props.onClick);
}

用孩子的道具调用：

let child = this.props.children;

childrenAnchors = this.isAnchor(child.props);

（以及更多；有关详细信息，请参阅源代码）。

于 2015-06-13T05:36:28.077 回答