Googleマップを表示/非表示にするためにreactJsでスタイルを追加するにはどうすればよいですか？

Question

私は学校、レストラン、店舗を選ぶ3つのラジオボタンを持っています。それぞれをクリックすると、学校、レストラン、店舗のいずれであっても、近くの次の場所を表示したいと思います。私はそれを個別に行う場合、私はGoogleマップとその近くの場所を表示する上で問題はありません。私はラジオボタンのいずれかをクリックしたときに、私のcomponentDidMountからのスタイルが更新されない理由

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> 
     ) 
} 

}

誰が助言することはできますか？基本的に私が学校をクリックすると、その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

私はコメントを先にupvoteできませんでしたので、ここで解決策を投稿します。アドバイスとして、componentDidMountのコードをすべてrenderの関数に入れていました。