如何在reactJs中添加樣式來顯示/隱藏Google地圖？

Question

我有三個選擇學校，餐館和商店的單選按鈕。當點擊每個，我想顯示以下附近的地方，無論是學校，餐館或商店。如果我單獨執行，我在顯示Google地圖及其附近地點方面沒有任何問題。

class PropertyMap extends React.Component{ 
constructor(props) { 
    super(props); 
    this.state = { 
     propertyType: 'default', 
     selectedOption: '' 
    } 

    this.handleClick = this.handleClick.bind(this); 
} 

handleClick(e){ 
    this.setState({ 
     propertyType: e.target.value 
    }); 
} 

componentDidMount(){ 
    let school = document.getElementById('school'); 
    let restaurant = document.getElementById('restaurant'); 
    let default = document.getElementById('default'); 

    if(this.state.propertyType == 'restaurant'){ 
     school.setAttribute('style', 'height:0'); 
     restaurant.setAttribute('style', 'height:100%'); 
    } 
    else if(this.state.propertyType == 'school'){ 
     school.setAttribute('style', 'height:100%'); 
     restaurant.setAttribute('style', 'height:0'); 
    } 
    else{ 
     school.setAttribute('style', 'height:0%'); 
     restaurant.setAttribute('style', 'height:0'); 
     default.setAttribute('style', 'height:100%'); 
    } 
} 

render(){ 

    let _standard = this.props.standard; 
    let datax = _standard.data; 
    let address = datax.address; 
    let city = datax.City; 
    let postcode = datax.Code; 
    let st = datax.State; 
    let defaultMap = (<DefaultMap mapdetails={datax} />); 
    let schoolMap = (<SchoolMap mapdetails={datax} type={this.state.propertyType} />); 
    let restaurantMap = (<RestaurantMap mapdetails={datax} type={this.state.propertyType} />); 

    return(
      <div> 
       <div className="container"> 
        <div className="row"> 
         <div className="col-md-12"> 
          <div className="location-info-container"> 
           <h2>Location</h2> 
           <p> 
            {address}. 
           </p> 
           <p> 
            {city}, {st} {postcode} 
           </p> 

           <p><b>Nearby:</b></p> 
           <label className="radio-inline"> 
            <input type="radio" name="map" id="" onChange={this.handleClick} value="school" /> School 
           </label> 
           <label className="radio-inline"> 
            <input type="radio" name="map" id="" onChange={this.handleClick} value="restaurant" /> Restaurant 
           </label> 
           <label className="radio-inline"> 
            <input type="radio" name="map" id="" onChange={this.handleClick} value="store" /> Store 
           </label> 
          </div> 
         </div> 
        </div> 
       </div> 
       <div id="gmap"> 
        <div id="default"> 
         {defaultMap} 
        </div> 
        <div id="restaurant"> 
         {restaurantMap} 
        </div> 
        <div id="school"> 
         {schoolMap} 
        </div> 
       </div> 
      </div> 
     ) 
} 

}

任何人都可以提出建議，爲什麼從我componentDidMount樣式當我點擊任何一個單選按鈕，沒有更新？基本上，如果我點擊學校，我希望其height等於100%和餐廳0，反之亦然。

Answer 1

就像我之前在評論中所說的，componentDidMount只在組件第一次掛載時執行。如果您需要在組件更新之前和/或之後執行某些操作，可以使用componentWillUpdate或componentDidUpdate。請參閱：https://facebook.github.io/react/docs/react-component.html

如果你只是想顯示或隱藏與單選按鈕行動的組成部分，在陣營最好的做法可能是這樣的：

class PropertyMap extends React.Component { 
 
    constructor(props) { 
 
    super(props); 
 
    this.state = { 
 
     propertyType: 'default', 
 
     selectedOption: '' 
 
    } 
 

 
    this.handleClick = this.handleClick.bind(this); 
 
    } 
 
    
 
    handleClick(e){ 
 
    this.setState({ 
 
     propertyType: e.target.value 
 
    }); 
 
    } 
 

 
    
 
    render() { 
 
     let map = <div>Your Default component here</div>; 
 
     switch (this.state.propertyType) { 
 
      case 'restaurant': 
 
       map = <div>Your Restaurant component here</div>; 
 
       break; 
 
      case 'school': 
 
       map = <div>Your School component here</div>; 
 
       break; 
 
     } 
 

 
     return(
 
       <div> 
 
        <div className="container"> 
 
         <div className="row"> 
 
          <div className="col-md-12"> 
 
           <div className="location-info-container"> 
 
            <label className="radio-inline"> 
 
             <input type="radio" name="map" id="" onChange={this.handleClick} value="school" /> School 
 
            </label> 
 
            <label className="radio-inline"> 
 
             <input type="radio" name="map" id="" onChange={this.handleClick} value="restaurant" /> Restaurant 
 
            </label> 
 
            <label className="radio-inline"> 
 
             <input type="radio" name="map" id="" onChange={this.handleClick} value="store" /> Store 
 
            </label> 
 
           </div> 
 
          </div> 
 
         </div> 
 
        </div> 
 
        <div id="gmap">{map}</div> 
 
       </div> 
 
      ) 
 
    } 
 
} 
 

 
// Render it 
 
ReactDOM.render(
 
    <PropertyMap />, 
 
    document.getElementById("root") 
 
);

<div id="root"></div> 
 
<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>

但是，如果你想使用高度方法，也許這樣更好（使用樣式和類屬性）

class PropertyMap extends React.Component { 
 
    constructor(props) { 
 
    super(props); 
 
    this.state = { 
 
     propertyType: 'default', 
 
     selectedOption: '' 
 
    } 
 

 
    this.handleClick = this.handleClick.bind(this); 
 
    } 
 
    
 
    handleClick(e){ 
 
    this.setState({ 
 
     propertyType: e.target.value 
 
    }); 
 
    } 
 
    
 
    
 

 
    
 
    render() { 
 
     const { propertyType } = this.state 
 

 
     return(
 
       <div> 
 
        <div className="container"> 
 
         <div className="row"> 
 
          <div className="col-md-12"> 
 
           <div className="location-info-container"> 
 
            <label className="radio-inline"> 
 
             <input type="radio" name="map" id="" onChange={this.handleClick} value="school" /> School 
 
            </label> 
 
            <label className="radio-inline"> 
 
             <input type="radio" name="map" id="" onChange={this.handleClick} value="restaurant" /> Restaurant 
 
            </label> 
 
            <label className="radio-inline"> 
 
             <input type="radio" name="map" id="" onChange={this.handleClick} value="store" /> Store 
 
            </label> 
 
           </div> 
 
          </div> 
 
         </div> 
 
        </div> 
 
        <div id="gmap"> 
 
         {/* 
 
         <div style={{height: (propertyType === 'restaurant') ? '100%' : '0%'}}>Your Restaurant component here</div> 
 
         <div style={{height: (propertyType === 'school') ? '100%' : '0%'}}>Your School component here</div> 
 
         <div style={{height: (propertyType !== 'restaurant' && propertyType !== 'school') ? '100%' : '0%'}}>Your Default component here</div> 
 
         */} 
 
         <div className={(propertyType === 'restaurant') ? 'show' : 'hide'}>Your Restaurant component here</div> 
 
         <div className={(propertyType === 'school') ? 'show' : 'hide'}>Your School component here</div> 
 
         <div className={(propertyType !== 'restaurant' && propertyType !== 'school') ? 'show' : 'hide'}>Your Default component here</div> 
 
        </div> 
 
       </div> 
 
      ) 
 
    } 
 
} 
 

 
// Render it 
 
ReactDOM.render(
 
    <PropertyMap />, 
 
    document.getElementById("root") 
 
);

.show { 
 
    width: 100%; 
 
    display: block; 
 
} 
 
.hide { 
 
    width: 0%; 
 
    display: none; 
 
}

<div id="root"></div> 
 
<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>

Answer 2

我以前無法評論評論，所以我只是在這裏發佈解決方案。正如所建議的那樣，我把我所有的代碼從componentDidMount放到render函數中，並且工作正常。