React:子组件中的父组件props无需显式传递

问题描述：

是否有可能使父级组件的道具在子级组件中可用，而无需将其传递下来.

Is it possible to have the props of the parent component to be available in child component without passing them down.

我正在尝试实现提供者模式，以便访问其子组件中的所有提供者道具.例如:

I am trying to implement a provider pattern, so that to access all the provider props in its child components. EX:

假设下面的提供程序comp FetchProvider 将自己获取数据和主题道具，并且当其包含任何子组件时，我都希望在其中访问道具"data"和"theme"子组件也是如此.我们如何实现呢?

Suppose the below provider comp FetchProvider will fetch the data and theme props on its own, and when any child component is enclosed by it, i want access both props "data" and "theme" in the child component as well. How can we achieve it?

class FetchProvider 
{

   proptypes= {
     data: PropTypes.shape({}),
     theme: PropTypes.shape({})
   }

   render()
   {
     // do some
   }

   mapStateToProps()
   {
      return {data, theme};
   }
}

class ChildComponent
{

   proptypes= {
     name: PropTypes.shape({})
   }

   render()
   {
     const{data, them} = this.props; // is this possible here?
     // do some
   }
}

，如果我尝试使用以下组件，则该组件.

and if i try to above components as below.

<FetchProvider>
   <ChildComponent name="some value"/>  //how can we access parent component props here? without passing them down
<FetchProvider/>

答

这正是反应上下文就是关于.

Consumer 可以访问 Provider 公开的数据，无论其嵌套的深度如何.

A Consumer can access data the a Provider exposes no matter how deeply nested it is.

// Context lets us pass a value deep into the component tree
// without explicitly threading it through every component.
// Create a context for the current theme (with "light" as the default).
const ThemeContext = React.createContext('light');

class App extends React.Component {
  render() {
    // Use a Provider to pass the current theme to the tree below.
    // Any component can read it, no matter how deep it is.
    // In this example, we're passing "dark" as the current value.
    return (
      <ThemeContext.Provider value="dark">

<Toolbar />
      </ThemeContext.Provider>
    );
  }
}

// A component in the middle doesn't have to
// pass the theme down explicitly anymore.
function Toolbar(props) {
  return (
    <div>
      <ThemedButton />
    </div>
  );
}

function ThemedButton(props) {
  // Use a Consumer to read the current theme context.
  // React will find the closest theme Provider above and use its value.
  // In this example, the current theme is "dark".
  return (
    <ThemeContext.Consumer>

{theme => <Button {...props} theme={theme} />}
    </ThemeContext.Consumer>
  );
}

这是一个小的正在运行的示例:

注意.这是react v16上下文API.

Note This is the react v16 context API.

React:子组件中的父组件props无需显式传递

相关推荐