Question

我正在用ReactJS构建一个Web应用程序，在主页上我使用的是三元运算符，两个运算符根据状态（如果为true或false）渲染两个不同的Fragment。

我的代码如下：

import React, { Component, Fragment } from 'react'
import { Link } from 'react-router-dom'

class Home extends Component {
  state = {
    citySearch : false
  }

    render(){

      return (
        <div className="home-main">

        { !this.state.citySearch ? (
          <Fragment>
            <h2 className="home-heading">Search Cafés from your</h2>
            <div className="home-buttons">
              <button className="home-buttons">Near You</button>
              <span>or</span>
              <button onClick={this.ActivateCitySearch} className="home-buttons">City</button>
            </div>
          </Fragment>
        )
          : (
            <Fragment>
              <h2 className="home-heading">Search Cafés from your</h2>
              <input className="search-café" placeholder="Enter your location"/>
              <Link className="search-input"><i className="fas fa-search"></i></Link>
            </Fragment>
          )
        }

        </div>
        )
    }
}

export default Home

该代码有效，但是我在控制台中得到了以下内容

InvalidValueError：不是HTMLInputElement的实例

有人知道如何摆脱这个错误吗？

谢谢

J

ReactJS-使用三元运算符的条件渲染-InvalidValueError

0 个答案: