React Navigation v6：类组件中如何设置参数值？

在React Navigation v6中，类组件同样可以通过this.props.route.params获取路由参数，具体可以在以下几个场景处理：

• 构造函数（constructor）中初始化：如果需要在组件初始化阶段就使用参数，可以在这里解构赋值，还能把参数存到实例属性或state里方便后续调用：

class DetailsScreen extends React.Component {
  constructor(props) {
    super(props);
    const { itemId, otherParam } = props.route.params;
    // 存到state或直接作为实例属性
    this.state = { itemId, otherParam };
    // 或者 this.itemId = itemId;
  }
  // 其他组件方法
}

• 生命周期方法中处理：比如componentDidMount（组件挂载时）、componentDidUpdate（组件更新时，需注意对比参数变化），适合需要用参数执行异步操作（如请求数据）的场景：

class DetailsScreen extends React.Component {
  componentDidMount() {
    const { itemId, otherParam } = this.props.route.params;
    // 执行需要参数的逻辑，比如根据itemId请求详情数据
  }

  componentDidUpdate(prevProps) {
    // 若参数可能动态变化，需对比前后props避免重复执行
    if (this.props.route.params.itemId !== prevProps.route.params.itemId) {
      const { itemId, otherParam } = this.props.route.params;
      // 处理参数更新后的逻辑
    }
  }
  // 其他组件方法
}

• render方法中直接使用：如果仅在渲染UI时用到参数，直接在render里解构即可：

class DetailsScreen extends React.Component {
  render() {
    const { itemId, otherParam } = this.props.route.params;
    return (
      <View>
        <Text>Item ID: {itemId}</Text>
        <Text>Other Param: {otherParam}</Text>
      </View>
    );
  }
}

注意：如果参数可能不存在，建议添加默认值避免报错，示例：

const { itemId = '默认ID', otherParam = '默认参数' } = this.props.route.params || {};

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