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>
  )
};

如何根据条件渲染组件？

3 个答案: