Question

我有一个下拉搜索框，用于显示结果，并且我有一个卡片组件，当下拉值与该卡片组件所针对的用户的值匹配时，我要显示该卡片组件。

我已经从道具中检索了用户的状态，并将其与下拉菜单的状态进行了比较，以创建函数onSearchSubmit来显示卡组件'ProfileCard'。

使用console.log测试onSearchSubmit函数时，if语句为true，但是不会显示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>
    )
}

谢谢

约翰

Answer 1

您应该在渲染钩子自身内部返回组件：

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

如果要从外部渲染，我建议您看看我的另一篇文章most efficient way of rendering JSX element。

Answer 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
}

在单独的函数中的“ if”语句之后显示组件（反应）

2 个答案: