ReactJS <p/> 或 <br/> 在 render() 中不起作用

Question

在使用 <div className="col-sm-10"> 形式的此 Bootstrap CSS 的自定义 ReactJS 组件之后使用时，我无法让 <p/> 或 <br/> 创建新行，即

var MyChatClientView = React.createClass({
  render: function() {
    return (
      <div>
        <h2>Chat</h2>
        <span>Type something</span>

        <MyChatForm />

        <p/>
        <br/>

        <div>
           This text is on the same line as MyChatForm, I want it on a new line!
        </div>  
      </div>
    );
  }
});

var MyChatForm = React.createClass({

handleSubmit: function(e) {
    e.preventDefault();

    var myChatTxt = this.refs.myChatTxt.getDOMNode().value.trim();
 },

 render: function() {
    return (
    <div>
      <form role="form" onSubmit={this.handleSubmit}>

        <div className="form-group">
           <input type="textarea" className="form-control" id="post-chat" ref="myChatTxt" />
        </div>

        <div className="form-group">
          <div className="col-sm-10">
            <button type="submit" className="btn btn-primary btn-lg btn-block">Send</button>
          </div>
        </div>

      </form>
    </div>
  );
  }
});

Answer 1

要使用 Bootstrap 调整表单控件的大小，(1) 您的表单需要 form-horizontal 类或 (2) 您的列需要包含在具有 row 类的元素中。

这在 Bootstrap 文档的 control sizing 部分中有介绍。

在您的情况下，将form-group 替换为所需的row 似乎是有意义的：

var MyChatForm = React.createClass({

  handleSubmit: function(e) {
    e.preventDefault();

    var myChatTxt = this.refs.myChatTxt.getDOMNode().value.trim();
  },

  render: function() {
    return (
      <div>
        <form role="form" onSubmit={this.handleSubmit}>

          <div className="form-group">
             <input type="textarea" className="form-control" id="post-chat" ref="myChatTxt" />
          </div>

          <div className="row">
            <div className="col-sm-10">
              <button type="submit" className="btn btn-primary btn-lg btn-block">Send</button>
            </div>
          </div>

        </form>
      </div>
    );
  }
});