用于 React 组件的样式化组件 React HTML 元素工厂

Question

我有一个非常基本的组件，它显示页面标题（<h1> 标签）和子标题（<h3> 标签），所以如果我想更新任何样式或添加特定功能，我可以在一个地方更新它。

有了这个，我正在开发一个样式组件，但我无法让它工作。我查看了here，这是一个很好的起始示例，但我希望用完整的书面示例完成它，这样我就可以看到我做错了什么。

我正在尝试将我的 select 标签放在我的标题标签旁边。我能够让它与原始/精确的 html 一起工作，但是当我尝试将它实现到一个组件中时，我似乎无法让它工作。对我做错了什么有任何想法吗？ 这是我的代码：

PageHeaderSubSection.js

import React from 'react'
export default class PageHeaderSubSection extends React.Component {
  render() {
    return (
      <h3 className="header-sub-content header-sub-name">
        {this.props.children}
      </h3>
    )
  }
}

MainPage.js

import React from 'react'
import styled from 'styled-components'
import PageHeader from '../common/page/PageHeader'
import PageHeaderSubSection from '../common/page/PageHeaderSubSection'


const StyledPageHeaderSubSection = styled(PageHeaderSubSection)``

const FormHeaderWithButtonStyle = styled.div`
  ${StyledPageHeaderSubSection} {
    margin: 0;
    display: inline-block;
  }
  select {
  vertical-align: text-bottom;
  }
`

class MainPage extends React.Component {

  render() {
    return (
      <>
        <PageHeader>Main</PageHeader>
        <FormHeaderWithButtonStyle>
          <PageHeaderSubSection>Main Modifiable Data</PageHeaderSubSection>
          <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
          <select className="form-control w-auto" >
            <option key={0} value={0}>None</option>
            <option key={1} value={"Select 1"}>{"Select 1"}</option>
            <option key={2} value={"Select 2"}>{"Select 2"}</option>
            <option key={3} value={"Select 3"}>{"Select 3"}</option>
          </select>
        </FormHeaderWithButtonStyle>
        <MoreDataHere />
      </>
    )
  }
}

Answer 1

如果您的组件FormHeaderWithButtonStyle 是PageHeaderSubsection 的子组件，则您要做的是根据上下文设置其样式。

styled-components 文档中有一个示例 here。

从styled-components 示例中抽象出来，这是您想要的设置：

const Parent = styled.div``;

const Child = styled.h3`
  ${Parent} & {
    display: inline-block;
  }
`;

function MyComponent() {
  return (
    <Parent>
      <Child>Hello</Child>
      <span>world</span>
    </Parent>
  );
}

注意事项

为此，父组件和子组件都必须是styled-components。

• 如果您要根据上下文设置样式的组件是基本的 React 组件，请将其扩展为样式化组件，就像 here 所做的那样。

示例

应用于你的具体例子，你会想要这样的东西：

// Stubs to replace your imports.
const PageHeader = ({ children }) => <h2>{children}</h2>;
const PageHeaderSubSection = ({ className, children }) => (
  <h3 className={className}>{children}</h3>
); // OR const PageHeaderSubSection = styled.h3``

// Changes start here
const FormHeaderWithButtonStyle = styled.div`
  select {
    vertical-align: text-bottom;
  }
`;

// Extend PageHeaderSubSection and apply a contextual style.
// '${FormHeaderWithButtonStyle} &' will target StyledPageHeaderSubSection that are preceeded by (have a parent of) FormHeaderWithButtonStyle.
// The '&' represents the css class for the current component.
const StyledPageHeaderSubSection = styled(PageHeaderSubSection)`
  ${FormHeaderWithButtonStyle} & {
    margin: 0;
    display: inline-block;
  }
`;

class MainPage extends React.Component {
  render() {
    return (
      <>
        <PageHeader>Main</PageHeader>
        <FormHeaderWithButtonStyle>
          {/** Make sure to use StyledPageHeaderSubSection here so that the contextual style can be applied. */}
          <StyledPageHeaderSubSection>
            Main Modifiable Data
          </StyledPageHeaderSubSection>
          <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
          <select className="form-control w-auto">
            <option key={0} value={0}>
              None
            </option>
            <option key={1} value={"Select 1"}>
              {"Select 1"}
            </option>
            <option key={2} value={"Select 2"}>
              {"Select 2"}
            </option>
            <option key={3} value={"Select 3"}>
              {"Select 3"}
            </option>
          </select>
        </FormHeaderWithButtonStyle>
      </>
    );
  }
}

Link to CodeSandbox.

参考资料：

• 扩展样式：https://styled-components.com/docs/basics#extending-styles
• 引用其他组件：https://styled-components.com/docs/advanced#referring-to-other-components
• 将 React 组件扩展为 styled-components: https://stackoverflow.com/a/54113434/13944042

Answer 2

如果您想要一个可以在一个地方重复使用和更改的 h3 组件，为什么不创建一个样式化的组件。您可以创建一个样式化组件页面并包含所有样式化组件，以便您可以将它们导入任何页面。

styled.styles.js

export const styledSubHeader= styled.h3`
margin: 0 ;
display: inline-block;

` 

然后将它导入你想要使用的页面并将你的内容包装在标签中？

<styledSubHeader> SubHeaderContent </styledSubHeader>

或者在你的 Main.js 中使用它

import React from 'react'
import styled from 'styled-components'
import PageHeader from '../common/page/PageHeader'
import PageHeaderSubSection from '../common/page/PageHeaderSubSection'




const FormHeaderWithButtonStyle = styled.div`
  
`
const styledSubHeader = styled.h3`
margin: 0 ;
display: inline-block;

` 

class MainPage extends React.Component {

  render() {
    return (
      <>
        <PageHeader>Main</PageHeader>
        <FormHeaderWithButtonStyle>
          <styledSubHeader>Main Modifiable Data</styledSubHeader>
          <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
          <select className="form-control w-auto" >
            <option key={0} value={0}>None</option>
            <option key={1} value={"Select 1"}>{"Select 1"}</option>
            <option key={2} value={"Select 2"}>{"Select 2"}</option>
            <option key={3} value={"Select 3"}>{"Select 3"}</option>
          </select>
        </FormHeaderWithButtonStyle>
        <MoreDataHere />
      </>
    )
  }