React Native + TypeScript中孙组件修改祖父组件状态的实现方法

首先来说你遇到的第一个问题：自定义方法里无法访问this.state。这是因为在React类组件中，你定义的普通方法（比如Hi()）默认不会自动绑定组件实例的this，所以当你调用这个方法时，this会变成undefined，自然就访问不到state了。

解决this绑定的三种常用方式： #

1. 在构造函数中手动绑定this
   这是最传统的方式，在组件的constructor里把方法的this绑定到组件实例：

   class ContentAccept extends Component {
     constructor (props: any) {
       super (props);
       this.state = { initialArray: [] };
       // 绑定方法的this到组件实例
       this.Hi = this.Hi.bind(this);
     }
   
     Hi() { 
       console.log(this.state.initialArray); 
     }
   }
   

2. 使用箭头函数定义类方法
   箭头函数会自动捕获当前上下文的this（也就是组件实例），这样就不需要手动绑定了：

   class ContentAccept extends Component {
     constructor (props: any) {
       super (props);
       this.state = { initialArray: [] };
     }
   
     // 用箭头函数定义方法
     Hi = () => { 
       console.log(this.state.initialArray); 
     }
   }
   

3. 调用方法时用箭头函数包裹（不推荐用于传递给子组件）
   如果只是在组件内部调用，可以在调用时用箭头函数包裹，但如果把这个方法传递给子组件，每次渲染都会创建新的箭头函数，可能影响性能，所以一般不推荐：

   // 比如在render里调用
   render() {
     return <button onClick={() => this.Hi()}>Click</button>;
   }
   

接下来解决核心需求：通过孙组件修改祖父组件的initialArray #

你需要把修改状态的方法从祖父组件通过props层层传递给孙组件，具体步骤如下：

1. 在祖父组件中创建修改state的方法

注意要用函数式更新的方式调用setState，因为新的数组状态依赖于旧状态，这样能保证拿到最新的state值：

class ContentAccept extends Component {
  constructor (props: any) {
    super (props);
    this.state = { initialArray: [] };
    // 绑定方法的this
    this.addItem = this.addItem.bind(this);
    this.removeItem = this.removeItem.bind(this);
  }

  // 添加元素到数组
  addItem(newItem: any) {
    this.setState(prevState => ({
      initialArray: [...prevState.initialArray, newItem]
    }));
  }

  // 根据索引删除元素
  removeItem(itemIndex: number) {
    this.setState(prevState => ({
      initialArray: prevState.initialArray.filter((_, index) => index !== itemIndex)
    }));
  }

  render() {
    // 将修改方法和数组传递给子组件
    return (
      <div>
        <h3>当前列表：{JSON.stringify(this.state.initialArray)}</h3>
        {/* 把方法传给子组件 */}
        <ParentComponent 
          addItem={this.addItem} 
          removeItem={this.removeItem}
          items={this.state.initialArray}
        />
      </div>
    );
  }
}

2. 子组件接收props并传递给孙组件

子组件只需要把祖父组件传来的方法和数据继续传递给孙组件即可：

// 子组件（ParentComponent）
function ParentComponent(props: any) {
  // 直接把props传递给孙组件
  return <ChildComponent {...props} />;
}

3. 孙组件调用方法修改祖父组件的state

孙组件通过props拿到修改方法，就可以触发这些方法来更新祖父组件的initialArray了：

// 孙组件（ChildComponent）
function ChildComponent(props: any) {
  // 添加元素的逻辑
  const handleAdd = () => {
    // 这里可以根据实际需求构造要添加的对象
    const newItem = { id: Date.now(), name: `Item ${props.items.length + 1}` };
    props.addItem(newItem);
  };

  // 删除元素的逻辑
  const handleRemove = (index: number) => {
    props.removeItem(index);
  };

  return (
    <div>
      <button onClick={handleAdd}>添加新元素</button>
      <ul>
        {props.items.map((item: any, index: number) => (
          <li key={item.id}>
            {item.name}
            <button onClick={() => handleRemove(index)}>删除</button>
          </li>
        ))}
      </ul>
    </div>
  );
}

这样孙组件就能通过调用祖父组件传来的方法，直接修改祖父组件的initialArray状态了。

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