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

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


reactjs react-component
person AKSHAY SALEKAR    schedule 03.01.2019    source источник
comment
Поддерживайте состояние isOpen в компоненте Home. Переключите его по щелчку изображения и на основе этого состояния отобразите AD условно   -  person Shubham Khatri    schedule 03.01.2019

Ответы (2)


arrow_upward
0
arrow_downward

Проверь это. Я думаю, это то, что ты хочешь

//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>
    );
  }
}
person Rahul Sawant    schedule 03.01.2019

arrow_upward
0
arrow_downward

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

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

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

person Bojan Ivanac    schedule 03.01.2019