如何让组件在 React 功能组件中呈现 onClick？

Question

我有点惊讶我在网上找不到这个，但我似乎找不到如何在 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>
);

Answer 1

你应该改变你的状态（或者你的 useEffect 依赖数组中的一个道具，如果你有的话）以强制重新渲染。在这种情况下：

setAdditionalSection(prevState=>!prevState);

Answer 2

像您调用的那样的状态更改将触发 re-render。

但是所有要渲染的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>
    );

如何让组件在 React 功能组件中呈现 onClick？

How can I make a component render onClick in a React functional component?

javascript

onclick

reactjs