React祖孙传值

. 通过 Props 传递：

在祖父组件中，将数据通过 props 传递给父组件，然后父组件再将数据通过 props 传递给子组件。这是 React 中常见的数据传递方式。

// Grandparent.js
import React from 'react';
import Parent from './Parent';

class Grandparent extends React.Component {
  render() {
    const dataForChild = 'Hello from Grandparent';
    return (
      <div>
        <Parent dataFromGrandparent={dataForChild} />
      </div>
    );
  }
}

export default Grandparent;

// Parent.js
import React from 'react';
import Child from './Child';

class Parent extends React.Component {
  render() {
    return (
      <div>
        <Child dataFromParent={this.props.dataFromGrandparent} />
      </div>
    );
  }
}

export default Parent;

// Child.js
import React from 'react';

class Child extends React.Component {
  render() {
    return (
      <div>
        <p>{this.props.dataFromParent}</p>
      </div>
    );
  }
}

export default Child;

2. 通过 Context 传递：

如果祖孙组件之间的层级较深，使用 props 可能会变得繁琐。这时可以使用 React 的 Context 来传递数据，使数据在组件树中共享。

// Grandparent.js
import React from 'react';
import Parent from './Parent';
import DataContext from './DataContext';

class Grandparent extends React.Component {
  render() {
    const dataForChild = 'Hello from Grandparent';
    return (
      <DataContext.Provider value={dataForChild}>
        <Parent />
      </DataContext.Provider>
    );
  }
}

export default Grandparent;

// Parent.js
import React from 'react';
import Child from './Child';

class Parent extends React.Component {
  render() {
    return (
      <div>
        <Child />
      </div>
    );
  }
}

export default Parent;

// Child.js
import React from 'react';
import DataContext from './DataContext';

class Child extends React.Component {
  render() {
    return (
      <DataContext.Consumer>
        {data => (
          <div>
            <p>{data}</p>
          </div>
        )}
      </DataContext.Consumer>
    );
  }
}

export default Child;