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。