Javascript 有条件地呈现多个组件--哪种样式更具可读性？

考虑一个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（）{
让复选框，删除按钮；
如果（可以编辑）{
复选框=(
);
删除按钮=(
);
}
返回(
{checkbox}
{deleteButton}
);
}

或

render（）{
让复选框=(
);
让deleteButton=(
);
如果（！可以编辑）{
复选框=空；
deleteButton=null；
}
返回(
{checkbox}
{deleteButton}
);
}

注意：

*-stuff

名称用于表示嵌套的

div

+其他组件。另外，我说按钮是“X行声明”，因为这是基于我所做的PR的实际代码审查

我认为后者在一个地方保留了“我应该呈现这些吗？”的逻辑。然而，第一个例子避免了否定（

！CAN_EDIT

），这会损害可读性

---

谢谢你的意见

这里有第三种选择：

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

返回(
{可以编辑&&}
{可以编辑&&}
);

---

此外，您的组件应该大写，最好使用驼峰格式-

这里有第三个选项：

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

返回(
{可以编辑&&}
{可以编辑&&}
);

---

此外，您的组件应该大写，最好使用驼峰大小写-

对于内联if-else测试，在React中，您可以使用：

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

render（）{
{ 
我的情况如何？
: 
}
}

或

render（）{
{ 
我的状况&&
}
}

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

---

希望有此帮助。

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

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

render（）{
{ 
我的情况如何？
: 
}
}

或

render（）{
{ 
我的状况&&
}
}

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

---

---

希望这有帮助。

第一个看起来更干净，但是它又是一个更适合于谁的东西？”亚当我改名为“标题”，因为我认为可读性是相当客观的（至少比“优选”）好。你读过条件渲染的文章吗？第一个看起来更干净，但是它又是一个更适合谁的东西？”亚当我改名为“标题”，因为我认为可读性是相当客观的（至少比“更好”）。你读过条件渲染的文章吗？如果组件真的这么小，我会使用这种内联方法，但是每个

*-按钮实际上都有8行长~（有一个论点是要把它们分成不同的组件，但这不是重点）~我刚刚检查了基于的代码审查——每个组件的长度来自于设置一些道具并传入一个子组件。它们有那么长是因为你向它们传递了很多道具吗？@Galupf是的，我将向每个人传递3-4个道具。在包装
td
标签和
按钮的子项之间，每一项都很长。传递给每一项的道具是相同的还是至少相似的？不，不幸的是不是。如果组件实际上这么小，我会使用这种内联方法，但每个
*-按钮的东西实际上都有~8行长~（有一个论点是要把它们分成不同的组件，但这不是重点）~我刚刚检查了基于的代码审查——每个组件的长度来自于设置一些道具并传入一个子组件。它们有那么长是因为你向它们传递了很多道具吗？@Galupf是的，我将向每个人传递3-4个道具。在包装
td
标签和
按钮的子项之间，每个子项都很长。传递给每个子项的道具是相同的还是至少相似的？不，很遗憾不是。