如何让React智能组件更灵活渲染不同无状态组件

我明白你的需求——想用一个负责CRUD的智能组件灵活渲染不同的无状态组件，同时还能把容器里的状态和方法传递过去，不用拆分成多个容器。其实很简单，我们可以通过在容器里维护当前要渲染的组件状态，再配合一个能传递props的渲染函数来实现。

步骤1：给容器组件添加状态控制当前渲染的组件 #

首先在ProductContainer的state里加一个字段，用来记录当前要显示的组件，比如currentComponent：

class ProductContainer extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      products: [],
      currentComponent: ListProductComponent // 初始渲染列表组件
    };
    // 绑定方法上下文
    this.getAll = this.getAll.bind(this);
    this.addNew = this.addNew.bind(this);
    this.switchToList = this.switchToList.bind(this);
    this.switchToAdd = this.switchToAdd.bind(this);
  }

  getAll(){
    // 这里写获取产品的逻辑，比如更新state里的products
    // 示例：this.setState({ products: [...获取到的产品列表] });
  }

  addNew(product){
    // 这里写添加产品的逻辑，比如更新state
    // 示例：this.setState({ products: [...this.state.products, product] });
  }

  // 切换到列表组件
  switchToList() {
    this.setState({ currentComponent: ListProductComponent });
  }

  // 切换到添加组件
  switchToAdd() {
    this.setState({ currentComponent: AddProductComponent });
  }

  // 动态渲染组件的函数，接收组件和要传递的props
  renderComponent(Component, props) {
    return <Component {...props} />;
  }

  render() {
    // 准备要传递给当前组件的所有props
    const componentProps = {
      products: this.state.products,
      fetchProducts: this.getAll,
      addProduct: this.addNew,
      switchToList: this.switchToList,
      switchToAdd: this.switchToAdd
    };

    return (
      <div>
        {/* 可以加个切换按钮，方便测试 */}
        <button onClick={this.switchToList}>查看产品列表</button>
        <button onClick={this.switchToAdd}>添加新产品</button>
        {/* 调用渲染函数，传递当前组件和props */}
        {this.renderComponent(this.state.currentComponent, componentProps)}
      </div>
    )
  }
}

步骤2：修改无状态组件，接收并使用传递来的props #

现在我们的无状态组件就能拿到容器里的状态和方法了，比如：

const ListProductComponent = (props) => {
  // 组件挂载时调用获取产品的方法
  React.useEffect(() => {
    props.fetchProducts();
  }, []);

  return (
    <div>
      <h2>产品列表</h2>
      <ul>
        {props.products.map((product, index) => (
          <li key={index}>{product.name}</li>
        ))}
      </ul>
      <button onClick={props.switchToAdd}>去添加产品</button>
    </div>
  );
};

const AddProductComponent = (props) => {
  const [newProductName, setNewProductName] = React.useState('');

  const handleAdd = () => {
    props.addProduct({ name: newProductName });
    setNewProductName('');
    props.switchToList(); // 添加完跳回列表
  };

  return (
    <div>
      <h2>添加新产品</h2>
      <input
        type="text"
        value={newProductName}
        onChange={(e) => setNewProductName(e.target.value)}
        placeholder="输入产品名称"
      />
      <button onClick={handleAdd}>添加</button>
      <button onClick={props.switchToList}>返回列表</button>
    </div>
  );
};

关键逻辑说明 #

• 状态控制渲染组件：通过currentComponent状态来决定当前显示哪个无状态组件，切换时只需要更新这个状态即可。
• 动态传递Props：renderComponent函数接收组件和props对象，用扩展运算符{...props}把所有props传递给目标组件，这样不管是状态还是方法都能传递过去。
• 方法绑定：记得在构造函数里绑定容器方法的上下文，不然在无状态组件里调用时this会指向undefined（或者用箭头函数定义方法也可以）。

这样你就可以在同一个容器里处理所有CRUD逻辑，灵活切换渲染不同的无状态组件，同时还能把需要的状态和方法传递给它们，完全不用拆分容器~

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