React祖孙传值

最新推荐文章于 2024-12-16 14:01:20 发布

原创最新推荐文章于 2024-12-16 14:01:20 发布 · 535 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#react.js #前端 #javascript

文章介绍了在React中，如何通过Props逐层传递数据以及当组件层级过深时，如何使用Context进行数据共享以简化开发。首先展示了Props从祖父组件到子组件的示例，然后是使用Context进行跨层级数据传递的方法。

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