带有React条件渲染问题的模具

编程问答 2022-08-15

问题描述

我们在create-react-app中使用了一个Stencil组件库，以与我们的数字指南保持一致。在大多数情况下，这些组件都能很好地工作……但是，只要我们尝试有条件地渲染这些组件的子代或与它们的生命周期进行交互，这些组件就会崩溃。

我们正确地包含了文件，然后在渲染到我们的App组件后运行index.js，

applypolyfills().then(() => {
  defineCustomElements();
});

示例：

import React,{useState} from 'react'

export default function App() {
  const [ done,setDone ] = useState(false);

  // other code...
  
  return (
    <custom-button> {done ? "Next":"Please fill out the remaining fields."} </custom-button>
  )
}

将done更改为true并重新发布组件后，所有按钮都会中断。 HTML输出来自

<custom-button color="primary" size="block" type="submit" class="hydrated">
  <!---->
  <button class="btn btn-block btn-primary" type="submit" aria-label="">
    <span class="sr-only" role="alert" aria-live="assertive"></span>
    <div style="visibility: visible;">
      Log In
    </div>
  </button>
</custom-button>

到

<custom-button color="primary" size="block" type="submit" class="hydrated">
  Next
</custom-button>

onClick功能消失了，样式也消失了。有什么想法吗？

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

custom-componentjavascriptreactjsreactjsreactjsreactjsstenciljs