反應創建一個按鈕 - 非硬編碼性能

Question

我想創建一個反應按鈕，這裏是當前的代碼：

var React = require('react'); 

var buttonStyle = { 
    margin: '10px 10px 10px 0' 
}; 

var Button = React.createClass({ 
    render: function() { 
    return (
     <button 
     className="btn btn-default" 
     style={buttonStyle} 
     onClick={this.props.handleClick}>{this.props.label}</button> 
    ); 
    } 
}); 

module.exports = Button; 

的問題是，我不想的className硬編碼，沒有的onclick。

我希望能夠添加類和onclick事件的代碼外...例如：

<Button bStyle="myChosenStyles" onclick="myChosenFunction" /> 

我怎樣才能做到這一點？

Answer 1

您需要正確地傳遞類名或點擊事件處理程序的道具，然後在組件中使用它，比如：

var Button = React.createClass({ 
    render: function() { 
    return (
     <button 
     className={this.props.bStyle} 
     style={buttonStyle} 
     onClick={this.props.onclick}>{this.props.label}</button> 
    ); 
    } 
}); 

// use {} when passing myChosenFunction to the props 
<Button bStyle="myChosenStyles" onclick={myChosenFunction} label="myLabel" /> 

你的代碼目前對click處理​​這是按鈕組件的屬性（可以只需將名稱更改爲onclick）。使用單引號或雙引號，您可以傳遞字符串變量（如label或className）。當你想傳遞對象，函數，數字等時，你需要用大括號{}包圍它。