如何使組件在React功能組件中呈現onClick？-有解無憂

我有點驚訝我在網上找不到這個，但我似乎找不到如何在 React 功能組件中執行此操作的示例。我有一個 React 組件，我想在單擊按鈕時渲染它。現在函式觸發了，我可以看到我的 console.log 觸發了，但是組件沒有渲染。我的第一個猜測是它不會渲染，因為 React 不知道更新視圖，但是我通過 useState 添加了布林值，它仍然不會渲染。我究竟做錯了什么？

下面是相關代碼。如何讓 addSection 中的組件渲染？

const FormGroup = ({index}) => {
  const [additionalSection, setAdditionalSection] = useState(false);

  const addSection = form => {
    setAdditionalSection(true);
    console.log('form', form);

    return additionalSection && (
      <div key={form.prop}>
        <p>This should render</p>
        <AdditiveSection
          form={form}
          register={register}
          errors={errors}
        />
      </div>
    );
  };
  ...
 return (
...
 <FormAdd>
   <LinkButton
      type="button"
      onClick={() => addSection(form)}
   >
     span className="button--small">{form.button}</span>
   </LinkButton>
 </FormAdd>
);

uj5u.com熱心網友回復：

你應該改變你的狀態（或者你的 useEffect 依賴陣列中的一個道具，如果你有的話）以強制重新渲染。在這種情況下：

setAdditionalSection(prevState=>!prevState);

uj5u.com熱心網友回復：

像您正在呼叫的狀態更改將觸發重新渲染。

但是所有要渲染的html都必須包含在功能組件的return陳述句中。您要渲染的元素可以像這樣有條件地渲染：

    const FormGroup = ({index}) => {
      const [additionalSection, setAdditionalSection] = useState(false);
    
      const addSection = form => {
        setAdditionalSection(true);
        console.log('form', form);
      };
      ...
     return (
    ...
     <FormAdd>
       <LinkButton
          type="button"
          onClick={() => addSection(form)}
       >
         <span className="button--small">{form.button}</span>
       </LinkButton>
       {additionalSection && 
         <div key={form.prop}>
            <p>This should render</p>
            <AdditiveSection
              form={form}
              register={register}
              errors={errors}
            />
          </div>
       }
     </FormAdd>
    );

轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/453739.html

標籤：javascript 反应点击

上一篇：為什么我不能用javascript洗掉這個類？

下一篇：GGPLOT中的可變圖例值和顏色