在React中如何返回两个JSX元素并在不同位置渲染？

有多种成熟的方式可以满足你的需求，以下是两种最常用的实现：

方法1：返回元素对象（最贴合你的需求） #

直接让MyInputComponent返回包含输入框、按钮两个独立React元素的对象，所有内部状态、按钮的事件逻辑都完全封装在组件内部，父组件只需要按需取出对应元素渲染到指定位置即可。

子组件代码示例：

import { useState } from 'react';

function MyInputComponent(props: { /* 你的组件入参定义 */ }) {
  // 内部状态、按钮逻辑全部放在组件内维护
  const [inputVal, setInputVal] = useState('');

  const handleBtnClick = () => {
    // 按钮逻辑示例：清空输入框
    setInputVal('');
  };

  // 返回两个独立的可渲染元素
  return {
    InputElement: <input value={inputVal} onChange={e => setInputVal(e.target.value)} {...props} />,
    ControlButton: <button onClick={handleBtnClick}>清空输入</button>
  };
}

父组件使用示例：

function ParentComponent() {
  // 调用子组件获取两个独立元素
  const { InputElement, ControlButton } = MyInputComponent({ placeholder: '请输入内容' });

  return (
    <div className="parent-component">
      {/* 渲染输入框 */}
      {InputElement}
      {/* 中间插入其他无关联的组件 */}
      <SomeOtherComponent />
      {/* 任意位置渲染控制按钮 */}
      {ControlButton}
    </div>
  );
}

方法2：React Portals（适合跨DOM节点渲染场景） #

如果你的按钮需要渲染到当前组件的DOM树之外的位置（比如页面头部、全局侧边栏等），可以使用React内置的createPortalAPI，你只需要提前在目标渲染位置预留一个DOM挂载节点即可，逻辑依然完全封装在子组件内部。

代码示例：

import { useState, createPortal } from 'react';

function MyInputComponent(props: { /* 你的组件入参定义 */ }) {
  const [inputVal, setInputVal] = useState('');
  const handleBtnClick = () => setInputVal('');

  return (
    <>
      {/* 输入框正常渲染 */}
      <input value={inputVal} onChange={e => setInputVal(e.target.value)} {...props} />
      {/* 按钮直接挂载到提前预留的id为btn-mount-point的DOM节点上 */}
      {createPortal(
        <button onClick={handleBtnClick}>清空输入</button>,
        document.getElementById('btn-mount-point')!
      )}
    </>
  );
}

你只需要在希望展示按钮的位置提前添加<div id="btn-mount-point"></div>即可，不需要父组件做额外的逻辑处理。

内容的提问来源于stack exchange，提问作者user1589188