Отображение компонента после оператора if в отдельной функции (react)

У меня есть раскрывающееся поле поиска, которое я хочу использовать для отображения результатов, и у меня есть компонент карты, который я хочу отображать, когда значение раскрывающегося списка совпадает со значением пользователя, для которого предназначен компонент карты.

Я получил состояние пользователя из реквизита и сравнил его с состоянием раскрывающегося списка, чтобы создать функцию onSearchSubmit для отображения компонента карты «ProfileCard».

При тестировании функции onSearchSubmit с использованием console.log оператор if верен, однако компонент ProfileCard не отображается. Ошибок нет, просто не отображается мой компонент.

Любая помощь будет оценена. Это мой первый вопрос, поэтому, если информации недостаточно, я постараюсь помочь, насколько смогу.

См. Код ниже. (Я пропустил разделы кода, которые, по моему мнению, не связаны с этим разделом).

onSearchSubmit = () => {
    if (this.state.selectedCategory === this.props.category) {
        console.log('it works')
        return ( <ProfileCard/> );
    } else {
        console.log('not working')
    }
}

render() {
    return (<div>
        <button onClick = {
            this.onSearchSubmit
        }> Search</button> 
        </div>
    )
}

Спасибо,

Джон

onClick - это событие, которое запускается при нажатии кнопки. Почему вы пытаетесь вернуть элемент реакции?
Goodbye StackExchange 13.09.2018 20:00

@Derek 朕 會 功夫 это сообщество работает не так. Оказаться полезным.

Murli Prajapati 13.09.2018 20:07

@Derek 朕 會 功夫 Я не знал, как поставить его в нужное место в DOM, отсюда и вопрос.

John Mutton 13.09.2018 20:15

@MurliPrajapati Спасибо

John Mutton 13.09.2018 20:15
1
4
970
2
Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Вы должны вернуть компонент внутри самого рендеринга:

render() {
 return (
   <div>
     <button onClick={this.onSearchSubmit}>Search</button>
     {
       this.state.selectedCategory === this.props.category &&
       <ProfileCard /> || null
     }
   </div>
  )
}

Если вы хотите рендерить извне, я предлагаю вам посмотреть еще один мой пост самый эффективный способ отрисовки JSX-элемента.

Ответ принят как подходящий

Вы неправильно используете условный рендеринг. Поместите компонент в рендер и добавьте туда условие на основе некоторой переменной.

onSearchSubmit = () => {
  if (this.state.selectedCategory === this.props.category) {
    console.log('it works')
    this.setState({
      renderProfileCard: true
    })
  } else { console.log('not working') }
}

render() {
  return (
    <div>
      <button onClick={this.onSearchSubmit}>Search</button>
      {this.state.renderProfileCard && <ProfileCard />}
    </div>
  )
}  

Добавьте флаг renderProfile в свой штат.

this.state = {
  renderProfileCard: false
}

Другие вопросы по теме