如何在生命周期方法中渲染新JSX？状态映射到props时如何条件渲染？

1. 如何在生命周期方法中渲染新的JSX元素？ #

首先得明确：React的生命周期方法不能直接返回JSX来触发渲染，组件的渲染输出完全由render()方法（或函数组件的返回值）负责。生命周期方法的作用是帮你在合适的时机更新组件状态或处理副作用，再让render()根据最新的状态/ props动态输出JSX。

举个实际例子，比如你想在组件挂载后延迟渲染一个新元素：

class DynamicComponent extends React.Component {
  state = {
    showNewElement: false
  };

  componentDidMount() {
    // 模拟异步操作，比如接口请求完成后更新状态
    setTimeout(() => {
      this.setState({ showNewElement: true });
    }, 1500);
  }

  render() {
    return (
      <div className="container">
        {/* 根据state的值决定渲染内容 */}
        {this.state.showNewElement ? (
          <h2>这是挂载后新渲染的元素！</h2>
        ) : (
          <p>加载中...</p>
        )}
      </div>
    );
  }
}

简单来说：生命周期负责触发状态变更，render()负责根据状态输出JSX，两者配合才能实现动态渲染。

2. 基于props更新的条件重定向正确实现方式 #

你在componentWillReceiveProps里直接返回<Redirect>的做法行不通——这个生命周期方法不处理返回的JSX，而且componentWillReceiveProps已经在React 16.3版本后被标记为过时（官方推荐用componentDidUpdate或者getDerivedStateFromProps替代）。

这里给你两种靠谱的实现方式：

方式一：类组件中用state控制，在render中渲染Redirect #

import { Redirect } from "react-router-dom";

class StatementComponent extends React.Component {
  state = {
    shouldRedirect: false,
    targetLocation: ""
  };

  componentDidUpdate(prevProps) {
    // 必须对比新旧props，防止无限更新循环
    if (prevProps.selectedStatement !== this.props.selectedStatement) {
      if (this.statementIsFiltered()) {
        this.setState({
          shouldRedirect: true,
          targetLocation: this.props.location
        });
      }
    }
  }

  statementIsFiltered() {
    // 你的过滤逻辑实现
    return /* 过滤结果 */;
  }

  render() {
    // 如果需要重定向，直接返回Redirect组件
    if (this.state.shouldRedirect) {
      return <Redirect to={this.state.targetLocation} />;
    }

    // 正常渲染组件的默认内容
    return (
      <div>
        {/* 组件原有内容 */}
      </div>
    );
  }
}

方式二：函数组件中用hooks处理（更推荐） #

如果你的项目已经使用函数组件，用React Router的useHistory钩子会更简洁：

import { useHistory, useEffect } from "react-router-dom";

function StatementComponent(props) {
  const history = useHistory();

  useEffect(() => {
    // 当selectedProps变化时检查是否需要重定向
    if (props.selectedStatement && props.statementIsFiltered()) {
      history.push(props.location);
    }
  }, [props.selectedStatement, props.location]);

  return (
    <div>
      {/* 组件原有内容 */}
    </div>
  );
}

需要注意的几个关键点：

• 永远不要在生命周期方法里尝试返回JSX，React不会处理这种返回值
• 类组件使用componentDidUpdate时，一定要对比prevProps和当前props，避免触发无限更新循环
• 重定向逻辑要么通过render()里的Redirect组件实现，要么调用路由的history.push()方法直接跳转

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