Question

当我要使用事件监听器从地图上与孩子们进行一些事件时，我遇到了这个问题。如何在父级创建的子级组件中使用EventListener？

尝试调整窗口大小：

https://2j2wnyvln.codesandbox.io/

代码正确吗？

Answer 1

您可以通过带有道具的事件列表器。
这是example的documentation（请看onTemperatureChange的{{1}}属性）：

TemperatureInput

// Child
class TemperatureInput extends React.Component {
  constructor(props) {
    super(props);
    this.handleChange = this.handleChange.bind(this);
  }

  handleChange(e) {
    this.props.onTemperatureChange(e.target.value);
  }

  render() {
    const temperature = this.props.temperature;
    const scale = this.props.scale;
    return (
      <fieldset>
        <legend>Enter temperature in {scaleNames[scale]}:</legend>
        <input value={temperature}
               onChange={this.handleChange} />
      </fieldset>
    );
  }
}

// Parent
class Calculator extends React.Component {
  constructor(props) {
    super(props);
    this.handleCelsiusChange = this.handleCelsiusChange.bind(this);
    this.handleFahrenheitChange = this.handleFahrenheitChange.bind(this);
    this.state = {temperature: '', scale: 'c'};
  }

  handleCelsiusChange(temperature) {
    this.setState({scale: 'c', temperature});
  }

  handleFahrenheitChange(temperature) {
    this.setState({scale: 'f', temperature});
  }

  render() {
    const scale = this.state.scale;
    const temperature = this.state.temperature;
    const celsius = scale === 'f' ? tryConvert(temperature, toCelsius) : temperature;
    const fahrenheit = scale === 'c' ? tryConvert(temperature, toFahrenheit) : temperature;

    return (
      <div>
        <TemperatureInput
          scale="c"
          temperature={celsius}
          onTemperatureChange={this.handleCelsiusChange} />
        <TemperatureInput
          scale="f"
          temperature={fahrenheit}
          onTemperatureChange={this.handleFahrenheitChange} />
        <BoilingVerdict
          celsius={parseFloat(celsius)} />
      </div>
    );
  }
}

Answer 2

如果我正确理解了这个问题，并且您想根据父对象的大小隐藏某些子元素，一种解决方法可能是根据父对象的大小在状态内设置一个标志：

render(){
    return(
       this.props.navigation.map(n=>{
         !(n.isBig && this.state.navHidden) && <NavigationList key={n.id} title={n.title} target={n.target} href={n.href}/>
       })
    )
}

然后，在渲染功能中，您可以防止子级显示如下：

n.isBig

media-queries将是您在导航项上设置的标志，以确定是否应将其隐藏在较小的屏幕尺寸中。但是您可能还有其他方法可以确定这一点。

由于您要尝试的是显示逻辑，因此您还应该检查是否可以使用普通CSS和MobileAds.initialize(this, "ca-app-pub-xxxxxxxx"); InterstitialAd = new InterstitialAd(this); InterstitialAd.setAdUnitId("ca-app-pub-xxxxxxxxx"); InterstitialAd.loadAd(new AdRequest.Builder().build()); InterstitialAd.setAdListener(new AdListener() { @Override public void onAdOpened() { mPoints.setText(new Integer(points).toString()); } @Override public void onAdFailedToLoad(int errorCode) { AdFailedToLoad=true; } @Override public void onAdClosed() { super.onAdClosed(); mName.setTextSize(25); mName.setText("User : " + intent_user); switchToScreen(R.id.screen_score); } });完成所需的行为。

ReactJS：如何在父级创建的子级组件中使用EventListener

2 个答案: