在動態使用函數中添加html類？

我正在製作一支筆，當用戶點擊漢堡包圖標（左上角）時，我希望它打開邊欄。我看到一條線索解釋如何去做here。在動態使用函數中添加html類？

總之，解決的辦法是做這樣的事情：

isActive:function(value){ 
    return 'btn '+((value===this.state.selected) ?'active':'default'); 
    },

我試圖做類似的（有點不同）的東西;這是我做的：

expandSidebar(){ 
    this.setState({active: !this.state.active}); 
    console.log(this.state.active ? "square-left active" : "square-left"); 
    return this.state.active ? "square-left active" : "square-left" 
    } 
... 

//different React component 
<div className={this.props.expandSidebar}> 
...

但它不起作用。我的目標是通過添加active類來單擊時顯示邊欄。當我使用控制檯登錄時，它會返回正確的字符串"square-left active"。

這是codepen：https://codepen.io/iggPen/pen/BdEJmw

我做了什麼錯？我很確定它返回square-left active，但它不顯示側邊欄。

來源

2017-09-05 Iggy

在筆變化'''到' –

您好普拉卡什，它沒有工作。當我做''時，一切都消失了。 – Iggy

您不能像className那樣傳遞函數。
您應該傳遞一個活動道具並在SidebarRectangle組件內部執行className邏輯。
例如（我已經添加了一個active道具這個組件）：
this.props.active ? "square-left active" : "square-left"

修改代碼的版本：

const sidebarOptions = ["Sidebars", "Are", "Super", "Cool"] 
 

 
class SidebarRectangle extends React.Component { 
 
    constructor(){ 
 
    super(); 
 
    } 
 
    render(){ 
 
    return (
 
     <div className={this.props.active ? "square-left active" : "square-left"}> 
 
     {sidebarOptions.map((option, index) => { 
 
      return (
 
      <div onClick={this.props.expandSidebar} key={index} className="sidebar-element">{option}</div> 
 
      ) 
 
     })} 
 
     </div> 
 
    ) 
 
    } 
 
} 
 
class MainRectangle extends React.Component { 
 
    constructor(){ 
 
    super(); 
 
    this.state = { 
 
     active: false 
 
    }; 
 
    this.expandSidebar = this.expandSidebar.bind(this); 
 
    } 
 
    expandSidebar(){ 
 
    this.setState({active: !this.state.active}); 
 
    console.log(this.state.active ? "square-left active" : "square-left"); 
 
    return this.state.active ? "square-left active" : "square-left" 
 
    } 
 
    render(){ 
 
    return (
 
    <div className="center"> 
 
     <SidebarRectangle expandSidebar={this.expandSidebar} active={this.state.active} /> 
 
     <div className="square-main"> 
 
     <div className="square-header"> 
 
      <span onClick={this.expandSidebar} className="header-notification clickable"><i className="fa fa-bars" aria-hidden="true"></i></span> 
 
      <span className="header-notification">Notifications</span> 
 
      <span></span> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    ) 
 
    } 
 
} 
 
class Application extends React.Component { 
 
    render() { 
 
    return(
 
     <div> 
 
     <MainRectangle /> 
 
     </div> 
 
    ) 
 
    } 
 
} 
 

 
ReactDOM.render(<Application />, document.getElementById('app'));

body { 
 
    background: #4FB5FB; 
 
    font-family: "Arial"; 
 
} 
 

 
.center { 
 
    position: absolute; 
 
    left: 50%; 
 
    top: 50%; 
 
} 
 

 
.square-main { 
 
    position: absolute; 
 
    height: 300px; 
 
    width: 300px; 
 
    left: 50%; 
 
    top: 50%; 
 
    background: #FFFFFF; 
 
    transform: translate(-50%, -50%); 
 
    display: flex; 
 
} 
 

 
.square-header { 
 
    height: 100px; 
 
    width: 300px; 
 
    background: #DD0031; 
 
    display: flex; 
 
    justify-content: space-around; 
 
    align-items: center; 
 
} 
 

 
.header-notification { 
 
    color: #FFFFFF; 
 
    font-size: 24px; 
 
} 
 

 
.clickable { 
 
    cursor: pointer; 
 
} 
 

 
.square-left { 
 
    width: 130px; 
 
    height: 225px; 
 
    background: #199FFA; 
 
    position: absolute; 
 
    left: -150px; 
 
    top: -110px; 
 
    display: flex; 
 
    flex-direction: column; 
 
    justify-content: space-evenly; 
 
    align-items: center; 
 
} 
 

 
.active { 
 
    transform: translate3d(-150px, 0, 0); 
 
} 
 

 
.sidebar-element { 
 
    color: #FFFFFF; 
 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet"> 
 
<div id="app"></div>

來源

2017-09-05 21:49:42

我已經清理你的代碼一點，並附上一個工作示例：

應用程序可以是純功能性成分，因爲它僅呈現
SidebarRectangle可能是藏漢，因爲它不具備
類名的側邊欄應該在組件中定義的任何狀態
您的MainRectangle構造可簡化的
您不需要傳遞迴調函數，因爲在您的示例中呈現的側邊欄項目不可點擊
onbar內部的SideClickRectangle不是必需的，因爲這些不是您的示例中可以單擊的按鈕。

const sidebarOptions = ["Sidebars", "Are", "Super", "Cool"]; 
 

 
class SidebarRectangle extends React.Component { 
 
    render() { 
 
    const { isActive } = this.props; 
 

 
    return (
 
     <div className={`${isActive ? "square-left active" : "square-left"}`}> 
 
     { sidebarOptions.map((option, index) => { 
 
      return (
 
      <div key={index} className="sidebar-element">{option}</div> 
 
      ) 
 
     }) } 
 
     </div> 
 
    ) 
 
    } 
 
} 
 

 
class MainRectangle extends React.Component { 
 
    state = { 
 
    isActive: false 
 
    } 
 

 
    handleExpandSidebar =() => { 
 
    this.setState({ isActive: !this.state.isActive }); 
 
    } 
 

 
    render(){ 
 
    const { isActive } = this.state; 
 

 
    return (
 
     <div className="center"> 
 
     <SidebarRectangle isActive={isActive} /> 
 
     <div className="square-main"> 
 
      <div className="square-header"> 
 
      <span onClick={this.handleExpandSidebar} className="header-notification clickable"><i className="fa fa-bars" aria-hidden="true" /></span> 
 
      <span className="header-notification">Notifications</span> 
 
      <span></span> 
 
      </div> 
 
     </div> 
 
     </div> 
 
    ) 
 
    } 
 
} 
 

 
const Application =() => { 
 
    return(
 
    <div> 
 
     <MainRectangle /> 
 
    </div> 
 
) 
 
} 
 

 
ReactDOM.render(<Application />, document.getElementById('app'));

body { 
 
    background: #4FB5FB; 
 
    font-family: "Arial"; 
 
} 
 

 
.center { 
 
    position: absolute; 
 
    left: 50%; 
 
    top: 50%; 
 
} 
 

 
.square-main { 
 
    position: absolute; 
 
    height: 300px; 
 
    width: 300px; 
 
    left: 50%; 
 
    top: 50%; 
 
    background: #FFFFFF; 
 
    transform: translate(-50%, -50%); 
 
    display: flex; 
 
} 
 

 
.square-header { 
 
    height: 100px; 
 
    width: 300px; 
 
    background: #DD0031; 
 
    display: flex; 
 
    justify-content: space-around; 
 
    align-items: center; 
 
} 
 

 
.header-notification { 
 
    color: #FFFFFF; 
 
    font-size: 24px; 
 
} 
 

 
.clickable { 
 
    cursor: pointer; 
 
} 
 

 
.square-left { 
 
    width: 130px; 
 
    height: 225px; 
 
    background: #199FFA; 
 
    position: absolute; 
 
    left: -150px; 
 
    top: -110px; 
 
    display: flex; 
 
    flex-direction: column; 
 
    justify-content: space-evenly; 
 
    align-items: center; 
 
} 
 

 
.active { 
 
    transform: translate3d(-150px, 0, 0); 
 
} 
 

 
.sidebar-element { 
 
    color: #FFFFFF; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet"/> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script> 
 
<div id="app"></div>

來源

2017-09-05 22:14:08

在動態使用函數中添加html類？

回答

相關問題