React类组件中向动态子组件传递State作为Props的方案

方案一：修正React.cloneElement的使用方式 #

如果之前用React.cloneElement没成功，大概率是没处理好子元素的遍历或传参逻辑，以下是正确的实现方式：

单个子组件场景 #

在PortalTemplate的render方法中，判断子元素有效性后克隆并注入account属性：

class PortalTemplate extends React.Component {
  state = {
    account: null
  };

  componentDidMount() {
    // 模拟调用getUser()获取用户信息
    const account = getUser();
    this.setState({ account });
  }

  render() {
    const { account } = this.state;
    // 仅对有效React元素进行克隆传参
    const enhancedChild = React.isValidElement(this.props.children)
      ? React.cloneElement(this.props.children, { account })
      : this.props.children;

    return (
      <div className="portal-wrapper">
        {/* 模板通用内容：导航栏、侧边栏等 */}
        {enhancedChild}
      </div>
    );
  }
}

多个子组件场景 #

如果模板下有多个子组件，用React.Children.map遍历克隆：

render() {
  const { account } = this.state;
  const enhancedChildren = React.Children.map(this.props.children, child => {
    return React.isValidElement(child)
      ? React.cloneElement(child, { account })
      : child;
  });

  return (
    <div className="portal-wrapper">
      {/* 通用内容 */}
      {enhancedChildren}
    </div>
  );
}

AccountPage直接从props接收状态：

class AccountPage extends React.Component {
  render() {
    const { account } = this.props;
    if (!account) return <div>加载中...</div>;

    return (
      <div className="account-page">
        <h2>个人信息</h2>
        <div>用户名：{account.username}</div>
        <div>邮箱：{account.email}</div>
        {/* 用户信息编辑表单 */}
      </div>
    );
  }
}

方案二：使用React Context（类组件适配版） #

如果后续有更多组件需要访问用户信息，用Context可以避免层层传参，提升代码可维护性：

1. 创建AccountContext #

// src/contexts/AccountContext.js
import React from 'react';
export default React.createContext(null);

2. 在PortalTemplate中作为Provider提供状态 #

import AccountContext from './contexts/AccountContext';

class PortalTemplate extends React.Component {
  state = {
    account: null
  };

  componentDidMount() {
    const account = getUser();
    this.setState({ account });
  }

  render() {
    const { account } = this.state;
    return (
      <AccountContext.Provider value={account}>
        {/* 模板通用内容 */}
        {this.props.children}
      </AccountContext.Provider>
    );
  }
}

3. 在AccountPage中消费Context #

方式一：使用Context.Consumer

import AccountContext from './contexts/AccountContext';

class AccountPage extends React.Component {
  render() {
    return (
      <AccountContext.Consumer>
        {account => {
          if (!account) return <div>加载中...</div>;
          return (
            <div className="account-page">
              <h2>个人信息</h2>
              <div>用户名：{account.username}</div>
              {/* 编辑区域 */}
            </div>
          );
        }}
      </AccountContext.Consumer>
    );
  }
}

方式二：使用static contextType（仅支持单个Context）

import AccountContext from './contexts/AccountContext';

class AccountPage extends React.Component {
  static contextType = AccountContext;

  render() {
    const account = this.context;
    if (!account) return <div>加载中...</div>;

    return (
      <div className="account-page">
        <h2>个人信息</h2>
        <div>用户名：{account.username}</div>
        {/* 编辑区域 */}
      </div>
    );
  }
}

方案三：渲染属性（Render Props）模式 #

这种方式逻辑直观，直接将account作为参数传给子组件的渲染函数：

修改PortalTemplate的render逻辑 #

class PortalTemplate extends React.Component {
  state = {
    account: null
  };

  componentDidMount() {
    const account = getUser();
    this.setState({ account });
  }

  render() {
    const { account } = this.state;
    return (
      <div className="portal-wrapper">
        {/* 通用内容 */}
        {this.props.children(account)}
      </div>
    );
  }
}

使用时传入渲染函数 #

<PortalTemplate>
  {(account) => <AccountPage account={account} />}
</PortalTemplate>

AccountPage的写法和方案一完全一致，直接从props接收account即可。

内容的提问来源于stack exchange，提问作者jared-leddy