如何根據條件渲染組件？

Question

在兩個地方，必須顯示組件Items 。
但是在一個地方，您需要一個額外的組件Filters ，在另一個地方-不需要。 Filters組件位於Items內部。

當我這樣做時，它不起作用：

const Items = ({ items, users, resourceUrl }) => {
  const [goods, setGoods] = useState(items);
  const [customers, SetCustomers] = useState(users);


  const handleSubmit = e => {
    e.preventDefault();
    // ...
  };

  const changeUser = e => {
    // ...
  }

  function DisplayFilter(props) {
    const isDisplay = props.isDisplay;
    const isUsers = props.users;
    if (isDisplay == undefined) {
      return (
        <ItemsFilters changeUser={changeUser} users={isUsers} />
      )
    }
    return null;
  }



  return (
    <div>
      <DisplayFilter isDisplay={resourceUrl} users={users}/>
      {goods.map((element) => (
        <Comment
          date={element.date}
          name={element.name}
          doctor={element.user}
          text={element.text}
        />
      ))}
      <span className="btn-show_more">
        <a className="button button_large" onClick={handleSubmit} rel="next">Show more</a>
      </span>
    </div>
  )
};

傳輸的數據不同。
如果刪除條件的輸出並return - <ItemsFilters changeUser={changeUser} users={isUsers} /> ，則一切正常。 但是，此過濾器將顯示在不應包含的其他位置。

Answer 1

您可以這樣寫：

const Items = ({ items, users, resourceUrl }) => {
  const [goods, setGoods] = useState(items);
  const [customers, SetCustomers] = useState(users);


  const handleSubmit = e => {
    e.preventDefault();
    // ...
  };

  const changeUser = e => {
    // ...
  }   

  return (
    <div>
      {resourceUrl && <ItemsFilters changeUser={changeUser} users={users} />}
      {goods.map((element) => (
        <Comment
          date={element.date}
          name={element.name}
          doctor={element.user}
          text={element.text}
        />
      ))}
      <span className="btn-show_more">
        <a className="button button_large" onClick={handleSubmit} rel="next">Show       more</a>
      </span>
    </div>
  )
};

如果您的條件（resourceUrl）存在，這只會渲染Filter元素。

Answer 2

你可以這樣

  return (
    <div>
    {props.isDisplay
                ? (
                    <ItemsFilters changeUser={changeUser} users={props.users} />
                )
            : null}
      {goods.map((element) => (
        <Comment
          date={element.date}
          name={element.name}
          doctor={element.user}
          text={element.text}
        />
      ))}
      <span className="btn-show_more">
        <a className="button button_large" onClick={handleSubmit} rel="next">Show more</a>
      </span>
    </div>
  )

Answer 3

就個人而言，我喜歡顯式地定義條件語句，並將要有條件呈現的組件保存在變量中。

The advantage with this is that it makes the code very clear and easy to understand and most importantly, it allows me to perform more complex conditions without getting my code all messy and hard to read as is usually the case with ternary operators.

const Items = ({ items, users, resourceUrl }) => {
  const [goods, setGoods] = useState(items);
  const [customers, SetCustomers] = useState(users);


  const handleSubmit = e => {
    e.preventDefault();
    // ...
  };

  const changeUser = e => {
    // ...
  }

 let itemFilters = null;

 if(resourceUrl) {
     itemFilters = <ItemsFilters changeUser={changeUser} users={users} />
 }


  return (
    <div>
      {itemFilters}
      {goods.map((element) => (
        <Comment
          date={element.date}
          name={element.name}
          doctor={element.user}
          text={element.text}
        />
      ))}
      <span className="btn-show_more">
        <a className="button button_large" onClick={handleSubmit} rel="next">Show more</a>
      </span>
    </div>
  )
};