如何从 function 返回 React 组件并渲染它 onClick？

Question

我在高阶组件中循环遍历了一组对象。 单击时，我想将这些对象之一传递给我的组件并呈现该组件。 我遇到的问题是不清楚如何返回组件并让 React 更新渲染以显示该组件。 我已经阅读了几篇关于此的Stackoverflow 帖子，将组件放入 html 的问题是它将我循环中的所有项目传递到我的组件，而不仅仅是我需要的那个 onClick。

我在控制台中看到的警告是react_devtools_backend.js:3973 Warning: Functions are not valid as a React child. This may happen if you return a Component instead of <Component /> react_devtools_backend.js:3973 Warning: Functions are not valid as a React child. This may happen if you return a Component instead of <Component />但这是有道理的，我不确定解决此问题的正确语法是什么。 下面是相关代码。

const FormGroup = ({index}) => {

  const renderSection = form => ( // I want to render this
    <AdditiveSection
      form={form}
      register={register}
      errors={errors}
    />
  );

   const addSection = form => {
     setAdditionalSection(prevState => !prevState);
     console.log('form', form);
     renderSection(form);
   };

  return (
    <section>
      <FormProvider {...methods}>
      <form onSubmit={methods.handleSubmit(onSubmit)}>
        {myForm.controls.map(form => {
          if (form.type === 'section') {
            return (
              <FormSection>
                <div className="section__label">
                  <h4>{form.label}</h4>
                </div>

                ...

                {form.button
                && (
                <FormAdd>
                  <LinkButton
                    type="button"
                    onClick={() => addSection(form)} // called here and passes my form object
                >
                  <span className="button--small">{form.button}</span>
                  </LinkButton>
                </FormAdd>
                )}

                {renderFormType(form)}
              </FormSection>
            );
          }

        })}

        // renderSection should render here outside of the loop
        {additionalSection && renderSection}


        <input type="submit" />
      </form>
    </FormProvider>
  </section>
);

Answer 1

将其放入 state 并进行渲染。

const { extraSection, setExtraSection } = useState(null);

const addSection = form => {
  setExtraSection(form);
};

return (
  ...
  // renderSection should render here outside of the loop
  {extraSection}
);

你原来的方法的问题是你没有在任何地方保存那个元素。 您在单击时调用了renderSection ，但它只是调用了 function 而没有在任何地方存储或显示该代码。

然后在您的渲染方法中，您再次引用了rederSection 。 这只是 function 的副本，现在没有参数。 它没有任何元素作为参数，甚至都没有被调用，所以 React 抱怨你正在尝试渲染一个 function，而不是一个元素。

Answer 2

试试吧

const renderSection = form => (
    
return(      
   <AdditiveSection       
       form={form}       
       register={register}       
       errors={errors}        
   />
  )
);

Answer 3

以防万一其他人可能正在为此苦苦挣扎。 感谢 szaman 和这篇文章。 原来我需要在循环中传递该部分，但只传递被单击的数据。

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

return (
  <section>
    <FormProvider {...methods}>
    <form onSubmit={methods.handleSubmit(onSubmit)}>
      {myForm.controls.map(form => {
        if (form.type === 'section') {
          return (
            <FormSection>
              <div className="section__label">
                <h4>{form.label}</h4>
              </div>

              ...

              {form.button
              && (
              <FormAdd>
                <LinkButton
                  type="button"
                  onClick={() => addSection(form)} // called here and passes my form object
              >
                  <span className="button--small">{form.button}</span>
                </LinkButton>
              </FormAdd>
             )}

              {additionalSection && additionalSection.position === ind && (
                <AdditiveSection
                  form={additionalSection}
                  register={register}
                  errors={errors}
                />
              )}

             {renderFormType(form)}
            </FormSection>
          );
        }

      })}


      <input type="submit" />
    </form>
  </FormProvider>
</section>
);