Условный рендеринг реагирует на отображение компонентов

Question

Мне нужно отобразить 2 вида рендеринга, один с 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;

. Я хочу условно отрендерить, что если страница не соответствует этой ссылке, у меня есть страница рендеринга с этим <div className="category-scroll">, если его совпадения, то без <div className="category-scroll"> этой строки

Answer 1

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

 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;

Answer 2

Это рабочий ответ

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