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

Я получил состояние пользователя из свойств и сравнил его с состоянием раскрывающегося списка, чтобы создать функцию 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>
    )
}

Спасибо

Джон

-1
John Mutton 13 Сен 2018 в 20:56

2 ответа

Лучший ответ

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

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
}
0
Murli Prajapati 13 Сен 2018 в 18:03

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

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

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

0
Bhojendra Rauniyar 13 Сен 2018 в 18:02