Question

我想通过Provider将自定义属性（正是：主题名称作为字符串）传递给Provider，因此在整个CSS定义中都可以使用它。 ThemeProvider几乎可以做到，但是它需要对象，而不是字符串。我不想通过主题设置来传递整个对象，而只是主题名称。

我不想使用特殊主题的道具或类似的道具，因为那样的话，我每次创建新样式的组件时都必须手动进行操作。如果提供程序仅与字符串配合使用，则它似乎是最佳选择。

是否有可能通过提供程序将字符串传递给内置样式组件的Consumer？

编辑：

[解决方案]

当我发现样式化组件导出其内部上下文时，我发现了我想要的东西。就是这样可以访问纯React上下文为您提供原始Provider，而没有任何“仅对象”限制（“仅对象”是样式组件自定义提供程序限制）。现在，我可以将所需的内容和需要的内容完全推送到每个样式化的组件中。

<xsl:template match="/" name="xsl:initial-template">
    <xsl:variable name="input-as-xml" select="json-to-xml($json)"/>
    <xsl:variable as="element(array)" name="transformed-xml">
        <array>
            <xsl:for-each select="$input-as-xml/*/*">
                <map xmlns="http://www.w3.org/2005/xpath-functions">
                    <string key="logic">
                        <xsl:value-of select="string[@key='logic']"/>
                    </string>
                    <map key="product">
                        <number key="productLength">
                            <xsl:value-of select="map/number[@key='productLength']"/>
                        </number>
                        <string key="productUnits">
                            <xsl:value-of select="map/string[@key='productUnits']"/>
                        </string>
                    </map>
                    <number key="numberOfUnits">
                        <xsl:value-of select="number[@key='numberOfUnits']"/>
                    </number>
                </map>
            </xsl:for-each>
        </array>
    </xsl:variable>
    <xsl:value-of select="xml-to-json($transformed-xml, map { 'indent' : true() })"/>
</xsl:template>

Answer 1

希望我已经从收集到的信息中得到了正确的答案。我还没有尝试过，但似乎对您有用。这是来自reactjs.org文档的lifted directly关于上下文的信息。它向下传递了主题的字符串名称。

const ThemeContext = React.createContext('green');

class App extends React.Component {
  render() {
    return (
      <ThemeContext.Provider value="blue">
        <SomeComponent />
      </ThemeContext.Provider>
    );
  }
}

function SomeComponent(props) {
  return (
    <div> 
      <OtherComponent />
    </div>
  );
}

class OtherComponent extends React.Component {
  static contextType = ThemeContext;
  render() {
    return <ThirdComponent theme={this.context} />
  }
}

Answer 2

我希望这可以帮助您从样式化组件中了解ThemeContext背后的思想。我已经将字符串“ blue”传递给ThemeContext只是为了表明它不应该是对象，而只能使用字符串。

import React, { useContext } from "react";
import ReactDOM from "react-dom";
import styled, { ThemeContext } from "styled-components";

// Define styled button
const Button = styled.button`
  font-size: 1em;
  margin: 1em;
  padding: 0.25em 1em;
  border-radius: 3px;
  color: ${props => props.theme};
  border: 2px solid ${props => props.theme};
`;

// Define the name of the theme / color (string)
const themeName = "blue";

const ThemedButton = () => {
  // Get the name from context
  const themeName = useContext(ThemeContext);
  return <Button theme={themeName}>Themed color: {themeName}</Button>;
};

function App() {
  return (
    <div className="App">
      <ThemeContext.Provider value={themeName}>
        <ThemedButton />
      </ThemeContext.Provider>
    </div>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

演示：https://codesandbox.io/s/styled-components-example-with-themecontext-cso55

通过提供程序将自定义道具传递给每个样式化的组件

2 个答案: