为什么我不能在给变量赋值之后使用<Show>条件方法显示solid-js按钮呢？

Question

我在实体店工作。我在我的项目中创建了一个url变量。如果该值不存在url变量，则我的应用程序必须向用户显示一个聊天创建按钮，如果变量有空值，则不能创建消息。为此，我在实体-js中创建了一个条件结构：

<Show when={open()}>

         <Show when={url()?.trim().length}>
              ...
           <CreateChat/>
             ...
         </Show>
         <Show when={!url()?.trim().length}>
                ...
         You cannot create a whelpschat 
             ...
         </Show>
</Show>

当我测试时，当url变量有一个空值时，它会显示消息--您不能创建一个whelpschat；但是当我将一个值分配给url变量(例如香蕉)时，它总是显示消息而不是按钮。但是，考虑到变量确实有一个非零值，通常应该显示的是按钮。我不明白为什么这不管用。我希望我能得到更有经验的社会人士的帮助。谢谢！

Answer 1

尝试使用后备支柱

SolidJS上的回退类似于普通js上的else语句，每当条件为false时，它总是呈现回退，如果条件为真，则它将呈现statement的所有子元素

而不是这个

     <Show when={url()?.trim().length}>
          ...
       <CreateChat/>
         ...
     </Show>
     <Show when={!url()?.trim().length}>
            ...
     You cannot create a whelpschat 
         ...
     </Show>

做这个

     <Show when={url()?.trim().length}
       fallback={<p>You cannot create a whelpschat</p>}  
     >
          ...
       <CreateChat/>
         ...
     </Show>

Answer 2

您的呈现逻辑是错误的:您同时呈现CreateChat组件和回退组件。若要修复它，请使用单个Show组件提供一个条件和一个后备条件。

<Show when={url()?.trim().length} fallback={<div>Invalid URL</div>}>
  <CreateChat/>
</Show>

或者，您可以在JSX中使用一个简单的if语句：

const CustomComponent = () => {
  if(url().trim().length) {
    return <CreateChat />
  }

  return <div>Invalid URL</div>
}