reactjs - 有没有办法将 props 隐式传递给组件？

Question

我希望能够为我的所有组件设置一个全局主题(变量集)，以继承和扩展其默认变量。例如，我有一个 button 组件，它具有默认样式(内联 CSS)，引用一组变量，例如 primaryColor，...我想无论我在何处使用这些组件，都能够轻松更新这些变量，而无需将它们显式传递给组件。

例如，我想要以下行为，我可以 (1) 将它们包装在组件中，并将 primaryColor 级联到每个 Button 组件，或者 ( 2)在更高阶的组件中导出此组件并更新 Prop 等...但是，我无法让这些方法起作用。也许，有更好的方法或者...

(1)

render() {
  return (
    <Theme variables={{ 'primaryColor': 'red' }}>
      <Button />
      <SecondButton />
      <ThirdButton />
    </Theme>
  );
}

(2)

render() {
  return (
    <div>
      <Button />
      <SecondButton />
      <ThirdButton />
    </div>
  );
}

export default Theme(SampleComponent)

这个方法有效，因为它显然是显式传递给每个组件的:

render() {
  return (
    <div>
      <Button variables={{ 'primaryColor': 'red' }} />
      <SecondButton variables={{ 'primaryColor': 'red' }} />
      <ThirdButton variables={{ 'primaryColor': 'red' }} />
    </div>
  );
}

Answer 1

我可以看到一些可以实现这一目标的方法:

扩展子属性

有限，但允许传递“额外” Prop 来引导组件的子组件:

import React, { Component, Children } from 'react';

class Theme extends Component {
  getChildren () {
    const { children, variables } = this.props;
    // Clone the child components and extend their props
    return Children.map(children, (child) => React.cloneElement(child, {
      variables
    }));
  }

  render () {
    return Children.only(this.getChildren());
  }
}

// Example
<Theme variables={{ 'primaryColor': 'red' }}>
  <Button />
  <SecondButton />
  <ThirdButton />
</Theme>

react 上下文

将变量传递到 React 树的任何部分的最简单方法是使用上下文，如 React documentation 中所述。 (这也是确切的用例!):

// Context provider
class ThemeProvider extends Component {
  getChildContext() {
    return {
      theme: this.props.variables
    };
  }

  render() {
    return Children.only(this.props.children);
  }
}

ThemeProvider.childContextTypes = {
  theme: PropTypes.object.isRequired
};

// HOC
function Theme(WrappedComponent) {
  class ThemeWrapper extends Component {

    render() {
      return <WrappedComponent { ...this.props } />;
    }
  }

  ThemeWrapper.contextTypes = {
    theme: PropTypes.object.isRequired
  };

  return ThemeWrapper;
};

// Using the HOC
class Button extends Component {
  render () {
    return <button style={{ color: this.context.theme.primaryColor }} />;
  }
}

const ThemeButton = Theme(Button);

// Example
<ThemeProvider variables={{ 'primaryColor': 'red' }}>
  <div>
    <ThemeButton />
  </div>
</ThemeProvider>

Redux 商店

当您使用 Redux 时，您可以将需要主题化的每个组件包装在 connect HOC 中，并将主题信息存储在存储状态中。这是一种共享数据的简单方法，并避免了上下文的复杂性:

class Button extends Component {
  render () {
    return <button style={{ color: this.props.theme.primaryColor }} />
  }
}

const ConnectedButton = connect((state) => ({ theme: state.theme }))(Button);

// Example
// During app setup
store.dispatch(setTheme({ 'primaryColor': 'red' }));

// Later
<div>
  <ConnectedButton />
</div>

希望这有帮助。