javascript - 有条件地渲染多个组件——哪种风格更具可读性？

Question

关闭。这个问题是 opinion-based 。目前不接受答案。

---

想要改进这个问题吗？更新问题，以便 editing this post 可以用事实和引文来回答它。 .

已关闭 5 年前。

Improve this question

考虑一个网络应用程序页面，其中有数据表，如果我有足够的权限，我可以编辑这些数据表。对于此示例，我们的编辑仅限于选择和删除行。

以下哪两种方法适用于 render每个表行的方法更具可读性？

render() {
  let checkbox, deleteButton;

  if (CAN_EDIT) {
    checkbox = (
      <checkbox-button-stuff
      ... this is an 8 line declaration
      ...
      ...
      ...
      ...
      ...
      ...
      ...
      />
    );

    deleteButton = (
      <delete-button-stuff           
      ... this is a 9 line declaration
      ...
      ...
      ...
      ...
      ...
      ...
      ...
      />
    );
  }

  return (
     <div>
       {checkbox}
       <other-table-stuff />
       {deleteButton}
     </div>
  );
}

或

render() {
  let checkbox = (
      <checkbox-button-stuff           
      ... this is a 9 line declaration
      ...
      ...
      ...
      ...
      ...
      ...
      />
  );

  let deleteButton = (
      <delete-button-stuff
      ... this is an 9 line declaration
      ...
      ...
      ...
      ...
      ...
      ...
      ...
      ...
      />
  );

  if (!CAN_EDIT) {
    checkbox = null;
    deleteButton = null;
  }

  return (
     <div>
       {checkbox}
       <other-table-stuff />
       {deleteButton}
     </div>
  );
}

注意:*-stuff名称用于表示嵌套 divs +其他组件。另外，我说这些按钮是“X 行声明”，因为这是基于我所做的 PR 的实际代码审查。

我认为后者保留了“我应该渲染这些吗？”的逻辑。在一个地方。然而，第一个例子避免了否定( !CAN_EDIT )，在我看来，这会损害可读性。

感谢您的任何意见!

Answer 1

对于 React 中的内联 if else 测试，您可以使用:

render() {
    { 
        <div>
            MY_CONDITION ?
                <MyComponentToRenderIfTrue />
            : 
                <MyOtherComponentToRenderIfFalse />
        </div>
    }
}

或者

render() {
    { 

        <div>
            MY_CONDITION && <MyComponentToRender />
        </div>
    }
}

在这两种情况下，您都可以更新您的 MY_CONDITION，React 将重新渲染您的组件。

希望这有帮助。