如何在 reactJs 中为 show/hiding 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

我无法对之前的评论进行投票，所以我将 post 解决方案放在这里。按照建议，我将 componentDidMount 中的所有代码放入 render 函数中并且它起作用了。

Answer 2

正如我之前在评论中所说，componentDidMount 仅在组件挂载时第一次执行。如果您需要在组件更新后 and/or 之前执行某些操作，则可以使用 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 属性）

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>

如何在 reactJs 中为 show/hiding google 地图添加样式？

How can you add styles in reactJs for show/hiding google maps?

javascript

css

google-maps

google-maps-markers

reactjs