Question

我使用react-bootstrap作为其布局功能。我使用Row标记并收到以下错误：

不变违规：Row.render（）：有效的ReactComponent必须是回。您可能已经返回undefined，数组或其他一些无效的对象。

我的用法如下。请指出我可能错过的任何事情：

var Row = require('react-bootstrap/lib').Row;


module.exports = React.createClass({

validateForm: function() {
        console.log("i am validating the transaction details");
        var input=this.refs.form;
        return(input.validateForm());

    },
render : function(){
return(
<div>
<Row>
</Row>
  </div>
); 

}

});

编辑：

即使以下情况也会出现同样的错误：

var React = require('react');
var ReactBootstrap = require('react-bootstrap');


module.exports = React.createClass({

validateForm: function() {
        console.log("i am validating the transaction details");
        var input=this.refs.form;
        return(input.validateForm());

    },
render : function(){
return(
<div>
<ReactBootstrap.Row>Hello World
</ReactBootstrap.Row>
  </div>
); 

}

});

编辑：在做console.log（Reactbootstrap.Row）时，我得到以下输出：

function (props, context, updater) {
          // This constructor gets overridden by mocks. The argument is used
          // by mocks to assert on what gets mounted.

          if (process.env.NODE_ENV !== 'production') {
            process.env.NODE_ENV !== 'production' ? warning(this instanceof Constructor, 'Something is calling a React component directly. Use a factory or ' + 'JSX instead. ) : void 0;
          }

          // Wire up auto-binding
          if (this.__reactAutoBindPairs.length) {
            bindAutoBindMethods(this);
          }

          this.props = props;
          this.context = context;
          this.refs = emptyObject;
          this.updater = updater || ReactNoopUpdateQueue;

          this.state = null;

          // ReactClasses doesn't have constructors. Instead, they use the
          // getInitialState and componentWillMount methods for initialization.

          var initialState = this.getInitialState ? this.getInitialState() : null;
          if (process.env.NODE_ENV !== 'production') {
            // We allow auto-mocks to proceed as if they're returning null.
            if (initialState === undefined && this.getInitialState._isMockFunction) {
              // This is probably bad practice. Consider warning here and
              // deprecating this convenience.
              initialState = null;
            }
          }
          !(typeof initialState === 'object' && !Array.isArray(initialState)) ? process.env.NODE_ENV !== 'production' ? invariant(false, '%s.getInitialState(): must return an object or null', Constructor.displayName || 'ReactCompositeComponent') : _prodInvariant('82', Constructor.displayName || 'ReactCompositeComponent') : void 0;

          this.state = initialState;
        }

上面的组件叫做TransactionDetails，我在transaction.jsx中使用了这个TransactionDetails组件，如下所示：

'use strict';

var Layout = require('../layout.jsx');
var React = require('react');
var Validation = require('react-validation');
var validator = require('validator');
var TextInput=require('../common/textInput.jsx');
var RadioButtonSet=require('../common/radioButtonSet.jsx');
var TransactionDetails = require('./transactionDetails.jsx');
var AddressList = require ('../suspects/AddressList.jsx');
module.exports = React.createClass({
 onClick:function(){
   console.log("I was called from transactions");
 }, 
 validateForm: function(e) {

        console.log("i am validating the form");
        var input=this.refs.transactionDetails;
        if(input.validateForm()===false){
          e.preventDefault();
          alert("There are validation errors");
        }


    },

  render: function render() {
      var populatedTransaction;
      var transactions = this.props.transactions;
      var suspects= this.props.suspects;
      var populatedSuspect = suspects[0];
      for(var i=0 ;i<transactions.length;i++){
        if(transactions[i].id===this.props.params.Id){
            populatedTransaction = transactions[i];
            break;
        }
      }
    return (
        <Layout {...this.props} addBundle='true'>
        <section className="suspects-section">
        <h2>Transactions</h2>
        <div>
        <form method="post" action="/PostTransaction" onSubmit={this.validateForm}>
        <input type="hidden" name="transaction_id" value={populatedTransaction.id} />
        <TransactionDetails ref="transactionDetails" populatedTransaction={populatedTransaction} {...this.props} />
        <input ref="numberInput" type="hidden" name="_csrf" value={this.props._csrf} />
        <input type="submit" value="Save"  />
        </form>
        </div>
        </section>
        </Layout>
    );
  }
});

Answer 1

请尝试将ReactBootstrap导入为var ReactBoostrap = require('react-bootstrap')并将您的行组件用作<ReactBootstrap.Row>。它有效。

module.exports = React.createClass({

validateForm: function() {
        console.log("i am validating the transaction details");
        var input=this.refs.form;
        return(input.validateForm());

    },
render : function(){
return(
<ReactBootstrap.Row>Hello World
</ReactBootstrap.Row>
); 

}

});

<强> JSFIDDLE

然而

var ReactBoostrap = require('react-bootstrap')
var Row = ReactBootstrap.Row

应该可以正常工作。

从react-bootstrap使用Row时出现Row.render错误

1 个答案: