Как вы можете добавлять стили в responseJs для отображения/скрытия карт 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

Как я уже сказал в комментарии раньше, компонентDidMount выполняется только при первом подключении компонента. Вы можете использовать componentWillUpdate или componentDidUpdate, если вам нужно что-то сделать до и/или после обновления компонента. См: https://facebook.github.io/react/docs/react-component.html

Если вы просто хотите, чтобы показать или скрыть компонент с радиокнопки действия, лучшая практика в React может быть что-то вроде этого:

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, и он сработал.