Question

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

每个表行的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的实际代码审查。

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

感谢您的任何意见！

Answer 1

这是第三种选择：

return (
  <div>
    { CAN_EDIT && <CheckboxButtonStuff /> }
    <OtherTableStuff />
    { CAN_EDIT && <DeleteButtonStuff /> }
  </div>
);

此外，您的组件应该大写，并且最好是驼峰 - https://reactjs.org/docs/jsx-in-depth.html#html-tags-vs.-react-components

Answer 2

对于React中的in else if else测试，您可以使用：

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

OR

render() {
    { 

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

在两者中，您都可以更新 MY_CONDITION ，React会重新渲染您的组件。

希望得到这个帮助。

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

2 个答案: