Question

我必须显示两种使用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

有条件的渲染包含一个条件和取决于条件的两个不同的UI是真实的还是虚假的。让我举个例子：

 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>

条件渲染对显示组件做出反应

2 个答案: