Question

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

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

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

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
   }
}

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

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

Answer 1

这正是react context的全部含义。

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

// 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>
  );
}

这里是一个小的running example：

注意：这是react v16上下文API。

Answer 2

您可以通过使用 React context 解决您的用例。借助上下文，提供者包装的任何子代都可以成为提供者提供的数据的使用者

根据您的情况，您可以像

那样使用它

context.js

export const FetchContext = React.createContext();

Provider.js

import { FetchContext } from 'path/to/context.js';
class FetchProvider extends React.Component
{

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

   render()
   {
        const { data, theme, children } = this.props;
        return (
             <FetchContext.Provider value={{ data, theme}}>
                   {children}
             </FetchContext.Provider>
        )
   }

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

ChildComponent.js

class ChildComponent extends React.Component
{

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

   render()
   {
     const{data, them} = this.props; // use it from props here
     // do some
   }
}

export default (props) => (
     <FetchContext.Consumer>
           {({ data, theme }) => <ChildComponent {...props} data={data} theme={theme} />}
     </FetchContext.Consumer>
)

但是，考虑到您已经在使用基于上下文概念的Redux，您也可以使用redux并访问子组件中的值，因为它们与Redux存储中提供的值相同给父母的孩子。

class ChildComponent extends React.Component
{

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

   render()
   {
     const{data, them} = this.props; // use it from props here
     // do some
   }
}

const mapStateToProps = (state) => {
     return {
          data: state.data,
          theme: state.theme
     }
}

Answer 3

您可以使用React.Children遍历子项，并使用React.cloneElement将想要发送的任何道具传递给新的克隆元素。

EX：

class Parent extends React.Component {
  constructor(props) {
    super(props);
  }

  render() {
    const { children } = this.props;
    const newChildren = React.Children.map(children, child =>
      React.cloneElement(child, { myProp: 'test' }));

    return(
      <View>
        {newChildren}
      </View>
    )
  }
}

Answer 4

您在寻找吗？

class MyParent extends Component {
    render() {
        return <MyChild {...this.props}>
            // child components
        </MyChild>
    }
}

这会将传递到MyParent的所有道具传递到正在渲染的MyChild。

React：子组件中的父组件道具没有显式传递

4 个答案: