javascript - 从 FunctionComponent 返回的子级中断父级渲染逻辑

Question

我创建了一个 FunctionComponent ，它应该有条件地返回它所涉及的子项。

<Tabs defaultActiveKey='1' type='card' activeKey={'1'}>
    <TabPane tab='Tab title' key='1'>
        <p>Tab title</p>
    </TabPane>
    <WrapperComponent>
        <TabPane tab='Tab title' key='2'>
            <p> Tab title 2 </p>
        </TabPane>
    </WrapperComponent>
</Tabs>


const WrapperComponent: React.FC<Props> = ({children}) => {
    if(true)
        return (children)
    else
        return <></>
}

当包装器返回子元素时，UI 会中断并且无法正确呈现。
选项卡从 antd 导入.
页面渲染的结果:

同样的情况发生在任何使用 antd UI 库中的一些逻辑渲染的元素上。
编辑
我正在寻找一种基于某些条件渲染子元素的方法，并在渲染后强制父元素“刷新” UI，从而重做创建 UI 库组件的逻辑。
我的目标是创建一个组件来验证登录用户是否有权呈现对象。有了这个，我试图避免 TSX 文件中逻辑变量的重复，并获得一个更可重用和可组件化的项目架构。

Answer 1

当您尝试模块化代码时。将访问控制逻辑移到单独的类中，例如 ACL .此类不需要是 UI 组件。简单的类就可以了。
在您的 UI 组件中，使用类方法来确定是否要显示功能。
密码笔 demo
ACL.js

// access controll managment
var ACL = (function () {
  var role = "guest";
  var getRole = function () {
    return role;
  };

  var init = function () {
    //read local storage/ cookies and get role
    role = "admin";
  };

  var hasAccessTo = function (page, feature) {
    //do the checking
    return role === "admin";
  };

  // call this after login
  init();

  return {
    init: init,
    getRole: getRole,
    hasAccessTo: hasAccessTo
  };
})();

export default ACL;

在您的 UI 组件中，它可以像这样使用:

import ACL from "./ACL";


// filter based on role
function filter() {
  if (ACL.hasAccessTo("tabsPage", "secretTab")) {
    return (
      <TabPane tab="Secret" key="2">
        The access code is: ██████
      </TabPane>
    );
  }
}

const Demo = () => (
  <Tabs defaultActiveKey="1">
    <TabPane tab="Info" key="1">
      Genral info
    </TabPane>
     
    /* you can write a separate function to do the filtering */
    {filter()}

    /* OR use expression like this */
    {ACL.hasAccessTo("tabsPage", "secretTab") && 
      <TabPane tab="Secret 2" key="3">
        secret 2: some secret
      </TabPane> }
  </Tabs>

您当前的 WrapperComponent不起作用，因为包装的标签没有得到正确处理。例如，id 是 rc-tabs-0-tab-null key 不见了。