componentClass道具在reactbootstrap中的用途是什么

Question

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

这个道具的用途是什么？任何例子将不胜感激。

Answer 1

Doc就在这里。基本上，当您创建一个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元件和spanCustomButton。