Question

我们在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功能消失了，样式也消失了。有什么想法吗？

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

0 个答案: