reactbootstrap中componentClass道具的目的是什么

Question

我阅读了react-bootstrap button doc并且有componentClass我无法理解的道具。他们将其解释为“您可以为此组件使用自定义元素类型”。

这个道具的目的是什么？任何示例将不胜感激。

Answer 1

医生就在这里。基本上，当您创建一个Button组件时，它会button默认呈现为html 元素。如果您想将它包装在“自定义组件”中，例如，<span>您可以使用componentClass属性来为您处理。

例子：

  var Button = React.createClass({

    render() {
      return <h1 ref='button_node'>
      <ReactBootstrap.Button bsStyle="success">Button</ReactBootstrap.Button>
      </h1>;
    }
  });  

  var CustomButton = React.createClass({

    render() {
      return <h1 ref='button_node'>
      <ReactBootstrap.Button componentClass="span" bsStyle="danger">Custom one</ReactBootstrap.Button>
      </h1>;
    }
  });  

  ReactDOM.render(<Button/>, document.getElementById('button')); 
  ReactDOM.render(<CustomButton/>, document.getElementById('custom-button')); 

在这种情况下，Button将呈现为默认button元素并CustomButton在span.