React中如何将子组件方法返回的Item组件渲染到父组件App中

你之前的写法不生效有两个核心原因：

• showItem是子组件SomeClass的内部方法，父组件App的作用域内不存在该变量，直接写showItem={showItem}会触发未定义报错
• 子组件内部方法返回的JSX默认仅能在子组件的渲染上下文中生效，要在父组件渲染该内容，需要跨组件同步渲染状态，最优解是使用React官方推荐的状态提升方案，符合单向数据流设计规范。

方案1：状态控制显隐（无复杂逻辑时首选） #

如果Item组件不需要依赖子组件的内部状态生成，直接把显隐状态提到父组件管理即可：

改造App.js #

import { useState } from 'react';
import SomeClass from './Nav';
import Item from './Item'; // 按实际路径引入Item组件

function App() {
  // 控制Item显隐的状态
  const [isItemVisible, setIsItemVisible] = useState(false);
  return (
    <div className="app">
      <SomeClass toggleShow={() => setIsItemVisible(!isItemVisible)} />
      {/* 在App的渲染节点中展示Item */}
      {isItemVisible && <Item />}
    </div>
  );
}

export default App;

改造Nav组件 #

import React from 'react';

class SomeClass extends React.Component{
  render(){
    return(
      <div onClick={() => this.props.toggleShow()} >
        ABC
      </div>
    );
  }
}

export default Nav;

方案2：传递生成的JSX（Item依赖子组件内部逻辑时使用） #

如果Item的生成必须依赖子组件的内部参数，直接把子组件生成的Item实例传递给父组件渲染即可：

改造App.js #

import { useState } from 'react';
import SomeClass from './Nav';

function App() {
  // 存储子组件传过来的Item实例
  const [renderItem, setRenderItem] = useState(null);
  return (
    <div className="app">
      <SomeClass setRenderItem={setRenderItem} />
      {renderItem}
    </div>
  );
}

export default App;

改造Nav组件 #

import React from 'react';
import Item from './Item';

class SomeClass extends React.Component{
  showItem = () =>{
    console.log("itemShown");
    // 这里可以写依赖子组件状态的Item生成逻辑
    return(<Item/>);
  }
  
  render(){
    return(
      <div onClick={() => this.props.setRenderItem(this.showItem())} >
        ABC
      </div>
    );
  }
}

export default Nav;

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