如何在React Native的App.tsx中调用组件类的非静态方法？

你当前写法的问题 #

• 非静态方法不能直接通过类调用：Class1.method()这种写法错误，非静态方法属于类的实例，必须创建Class1的实例后才能调用。
• 直接修改state无效：React类组件中不能直接给this.state赋值，必须使用this.setState()来更新，否则组件不会重新渲染。
• this指向错误：map里用普通函数会导致this不指向组件实例，无法访问this.state。

正确解决方案 #

方案一：通过Props传递数据（推荐） #

React的核心是单向数据流，优先通过props把数据传给子组件，子组件内部处理数据并更新state。

修改后的App.tsx：

import { useState, useEffect } from 'react';
import Class1 from './Class1';

const App = () => {
  const [variable, setVariable] = useState<Record<string, string>>({});

  useEffect(() => {
    // 模拟给variable赋值
    setVariable({ company1: '公司A', company2: '公司B' });
  }, []);

  // 将variable作为props传给Class1
  return <Class1 data={variable} />;
};

export default App;

修改后的Class1.tsx：

import { Component } from 'react';

// 定义props和state的类型，避免any
interface Class1Props {
  data: Record<string, string>;
}

interface Class1State {
  company_name: string[];
}

class Class1 extends Component<Class1Props, Class1State> {
  constructor(props: Class1Props) {
    super(props);
    this.state = {
      company_name: [],
    };
  }

  // 组件挂载时处理初始数据
  componentDidMount() {
    this.processData(this.props.data);
  }

  // props更新时重新处理数据
  componentDidUpdate(prevProps: Class1Props) {
    if (prevProps.data !== this.props.data) {
      this.processData(this.props.data);
    }
  }

  // 处理数据并更新state
  processData(param: Record<string, string>) {
    if (Object.keys(param).length === 0) return;
    const companies = Object.values(param);
    // 使用setState更新，基于之前的state合并数据
    this.setState((prevState) => ({
      company_name: [...prevState.company_name, ...companies],
    }));
  }

  render() {
    return (
      <div>
        {this.state.company_name.map((name, idx) => (
          <div key={idx}>{name}</div>
        ))}
      </div>
    );
  }
}

export default Class1;

方案二：通过Ref获取实例调用方法（仅特殊场景使用） #

如果必须主动调用子组件的方法，可以用useRef获取Class1的实例，但这种方式会破坏单向数据流，尽量少用。

修改后的App.tsx：

import { useState, useEffect, useRef } from 'react';
import Class1 from './Class1';

const App = () => {
  const [variable, setVariable] = useState<Record<string, string>>({});
  // 创建ref保存Class1实例
  const class1Ref = useRef<Class1>(null);

  useEffect(() => {
    setVariable({ company1: '公司A', company2: '公司B' });
  }, []);

  // 当variable变化时调用实例方法
  useEffect(() => {
    if (class1Ref.current && Object.keys(variable).length > 0) {
      class1Ref.current.processData(variable);
    }
  }, [variable]);

  return <Class1 ref={class1Ref} />;
};

export default App;

修改后的Class1.tsx：

import { Component } from 'react';

interface Class1State {
  company_name: string[];
}

class Class1 extends Component<any, Class1State> {
  constructor(props: any) {
    super(props);
    this.state = {
      company_name: [],
    };
    // 绑定this，确保方法内的this指向组件实例
    this.processData = this.processData.bind(this);
  }

  processData(param: Record<string, string>) {
    if (Object.keys(param).length === 0) return;
    const companies = Object.values(param);
    this.setState((prevState) => ({
      company_name: [...prevState.company_name, ...companies],
    }));
  }

  render() {
    return (
      <div>
        {this.state.company_name.map((name, idx) => (
          <div key={idx}>{name}</div>
        ))}
      </div>
    );
  }
}

export default Class1;

关键注意事项 #

• 永远不要直接修改this.state，必须用this.setState()触发组件重新渲染。
• 类组件中方法的this需要绑定，可以用构造函数绑定、箭头函数定义方法或者调用时用箭头函数。
• 优先使用props传递数据，这是React的标准数据流模式，代码更易维护。

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