javascript - 如何将 DOM 元素移动到 React 中的单独组件中？

Question

我正在尝试将一个组件中的 DOM 元素移动到一个单独的组件中。基本上，div需要向上移动两个父级。

我有两个组件在起作用：

1. AuthFlow.js
2. 注册.js

//AuthFlow.js
{renderForm()}
      {formType === 'signUp' && (
        // This div needs to move up 
        <div className="mt-6">
          <p className="font-body text-white">
            Already have an account?{' '}
            <span
              className="text-quad cursor-pointer"
              onClick={() => updateFormType('signIn')}
            >
              Sign In
            </span>
          </p>
        </div>
      )}

// SignUp.js
... 
</div>
        <button
          className="transition-all transform hover:translate-y-1 rounded-md bg-tertiary py-3 mt-6 cursor-pointer border-2 border-transparent focus:outline-none focus:ring-2 focus:ring-tertiary focus:border-transparent"
          onClick={signIn}
          title="Sign In"
        >
          Sign in
        </button>
        // Eventual placement of the Div I want to move
      </form>

我已经研究过 React 门户，但我不确定这是否是可行的方法。