Css 条件渲染对显示组件作出反应

我必须显示两种渲染，一种使用css，另一种不使用css

class SearchSection extends Component {
  constructor(props) {
    super(props);
    this.state = {
      input: null,
      pathName: "/rule-builder"
    };
  }

  handleChange = e => {
    e.preventDefault();
    this.setState({ input: e.target.value });
  };

  render() {
    const handlepathName = window.location.pathname;
    console.log(handlepathName);

    return (
      <div>
        <div className="search-section">
          <input
            type="text"
            className="form-control"
            placeholder={this.props.placeholder || "Search lists of values ..."}
            value={this.state.input}
            onChange={this.handleChange}
          />
          <span className="search-icon">
            <img src={images.SEARCH_ICON} alt="icon" title="search" />
          </span>
        </div>
        <div className="category-scroll">
          {this.props.render && this.props.render(this.state.input)}
        </div>
      </div>
    );
  }
}

export default SearchSection;

---

我想有条件地呈现，如果页面与链接不匹配，则呈现页面与此链接不匹配，如果其匹配，则不带此行

条件呈现包含一个条件和两个不同的UI，取决于条件是truthy还是falsy。 让我举一个例子：

 class SearchSection extends Component {
  constructor() {
    super();
    this.state = {
      pathName: "/rule-builder"
    };
  }

  render() {
    window.location.pathname == this.state.pathName  ? 
    return (
      <div>
        Hello
      </div>
    ) 
     :
     return (
      <div>
       good bye
      </div>
    )
  }
}

export default SearchSection;

---

这是有效的答案

    <div>
    <div className="search-section">
      <input
        type="text"
        className="form-control"
        placeholder={this.props.placeholder || "Search lists of values ..."}
        value={this.state.input}
        onChange={this.handleChange}
      />
      <span className="search-icon">
        <img src={images.SEARCH_ICON} alt="icon" title="search" />
      </span>
    </div>
    {window.location.pathname == this.state.pathName ? (
      <div>{this.props.render && this.props.render(this.state.input)}</div>
    ) : (
      <div className="category-scroll">
        {this.props.render && this.props.render(this.state.input)}
      </div>
    )}
  </div>

---

你的问题不够清楚。你能更具体一点吗？现在可以了吗？我在return语句中看到了表达式错误