простейший подход динамического добавления компонентов в реакции

Question

в данный момент работаю над реакцией.У меня есть два компонента, скажем, объявление и дома.Внутри домашних компонентов у меня есть одно изображение, и по событию клика по этому изображению я хочу сделать объявление внутри домашнего компонента под изображением.Есть ли простой метод.спасибо!

Answer 1

То, что предложил @sdkcy, хорошо, но троичный оператор на самом деле не нужен. Вы можете сделать следующее

{ this.state.isAdShown && <ComponentToShow /> }

Это избавляет от бесполезного : null результата.

Answer 2

проверьте это.я думаю, что это то, что вы хотите

//dynamically generate div 
let DynamicDiv=()=>{
    return (<div>
        <p>i am here</p>
    </div>)
}

class App extends Component {
  constructor(props){
    super(props)
    this.state={
      visible:false //visibility of Component
    }

    this.divVisiblity=this.divVisiblity.bind(this) //function is bind when user clicks on pic
  }
  divVisiblity(){
    //this function will get called when user clicks on function
    this.setState(()=>{return {visible:!this.state.visible}}) //changes visible state of Component when user clicks

  }
  render() {
    return (
      <div>
      <div className="App">
      {/* onClick is assigned function named divVisiblity */}
        <img onClick={this.divVisiblity} src="https://placekitten.com/g/200/300" alt="test"/>
          {/*this is ternary if else statement in js */}
      {/* if visible = true ,display Component else dont  */}
      <div> 
        {this.state.visible && <DynamicDiv/>}
      </div>
    );
  }
}

Answer 3

I think that will help to you.

export default class HomeComponent extends Component<Props> {
    constructor(props) {
        super(props);
        this.state = {
            renderAdComponent: false
        };
        this.onClickHandler = this.onClickHandler.bind(this);
    }

    onClickHandler() {
        this.setState({renderAdComponent: !this.state.renderAdComponent})
    }

    render() {
        return (
            <View>
                <Image onClick={this.onClickHandler}/>
                {this.state.renderAdComponent ? <AdComponent/> : null}
            </View>
        );
    }
}