React祖孙传值

Myth丶恋晨 2024-03-23 22:33 44阅读 0赞

**. 通过 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;