如何根据条件渲染组件？答案

【问题标题】：how to render a component according to the condition?如何根据条件渲染组件？
【发布时间】：2019-08-02 10:18:57
【问题描述】：

需要在两个地方显示组件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} />，则一切正常。但是过滤器会显示在其他不应该显示的地方。

【问题讨论】：

良好实践建议您需要有两个组件，一个是简单的，另一个是用过滤器装饰它的高阶组件。使此代码工作的任何编辑也将使其更难重用和维护。刚才提交的两个答案证明了我的观点：D

标签： javascript node.js reactjs ecmascript-6

【解决方案1】：

你可以这样做

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

【讨论】：

【解决方案2】：

你可以这样写：

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 元素。

【讨论】：

【解决方案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>
  )
};

【讨论】：