反应引导程序中组件类道具的用途是什么

Question

我看了react-bootstrap button doc，有componentClass的道具我看不懂。他们这样解释 "You can use a custom element type for this component".

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

Answer 1

Doc就在这里。基本上，当您创建一个 Button 组件时，默认情况下它将呈现为 button html 元素。如果您想将其包裹在 "custom component" 中，例如 <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。

反应引导程序中组件类道具的用途是什么

What is the purpose of componentClass prop in reactbootstrap

react-bootstrap