Reactjs和添加類

Question

我有一個反應組件是一個窗體與各種領域，我希望能夠通過傳遞道具隱藏各個領域。 Id有一個名爲hideElements的道具，其中包含一個與表單元素的ref相匹配的id列表。

如果我使用jquery通過它的ref獲取每個元素並在componentDidMount中添加一個「隱藏」類，它會導致反應問題嗎？有沒有更好的方法來做到這一點？

Answer 1

有沒有理由使用jQuery？你能否有條件地隱藏或不顯示渲染方法中的元素？

// Assuming props.hideElements = {'title' : true, 'email' : true}; 
render: function() { 
    var hideElements = this.props.hideElements; 
    return (
     <div> 
      <input className={hideElements['title'] ? 'hide' : null} name="title" type="text"/> 
      OR 
      {hideElements['email'] ? null : <input name="email" type="text" />} 
     </div> 
    ) 
} 

如果你想保持渲染方法更簡潔，你可以有邏輯的一個變量或函數，然後將結果輸出（或者您的元素或沒有）的其他地方。

render: function() { 
    return (
     {this.renderInputTitle()} 
     {this.renderInputEmail()} 
    ) 
} 

Answer 2

您可以使用classnames庫並用css隱藏字段。通過這種方式，您可以保持清晰的反應代碼，並且不會有大量if語句。

Answer 3

您可以使用ref在React中添加一個新類。

import React from "react"; 
export default class Text extends React.Component { 
    constructor() { 
     super() 
    } 
    click(){ 
     this.refs.myDiv.className="box formControl inputBox";//using button to add a class 
    } 
    componentDidMount(){ 
     this.refs.myDiv.className="box formControl inputBox";// add a class 
    } 
    render() { 
     return (
      <div> 
       <div ref="myDiv"></div> 
       <button onClick={this.click.bind(this)}>click</button> 
      </div> 


     ) 
    } 

}