styled-components - 访问父组件内的子组件 prop

Question

我遇到一个问题，有一个名为 Breadcrumb 的样式组件，但该组件依赖于 1 个单独的样式组件，即 BreadcrumbItem。两个组件都有不同的 props。

BreadcrumbItem.js:

import React from 'react';
import PropTypes from 'prop-types';
import styled from 'styled-components';

const propTypes = {
  /** Active the current BreadcrumbItem. */
  active: PropTypes.bool,
  /** Additional classes. */
  className: PropTypes.string
};



const AbstractBreadcrumbItem = (props) => {
  const { className, active, ...attributes } = props;

  return <li {...attributes} className={className} />;
};

AbstractBreadcrumbItem.propTypes = propTypes;

const BreadcrumbItem = styled(AbstractBreadcrumbItem)``;

BreadcrumbItem.propTypes = propTypes;

export default BreadcrumbItem;

Breadcrumb.js:

import React from "react";
import styled from "styled-components";
import PropTypes from "prop-types";

const propTypes = {
  /** Additional classes. */
  className: PropTypes.string,
  /** Primary content. */
  children: PropTypes.node,
  /** Custom separator */
  separator: PropTypes.string,
  /** Change the look and feel of the BreadcrumbItem. */
  scheme: PropTypes.oneOf(["red", "purple"]).isRequired
};

const defaultProps = {
  scheme: "red",
  separator: "/"
};

const AbstractBreadcrumb = props => {
  const { className, children, separator, scheme, ...attributes } = props;

  return (
    <ul {...attributes} className={className}>
      {children}
    </ul>
  );
};

AbstractBreadcrumb.propTypes = propTypes;
AbstractBreadcrumb.defaultProps = defaultProps;

const Breadcrumb = styled(AbstractBreadcrumb)`

              display: flex;
              flex-wrap: wrap;
              padding: 18px 26px;
              margin-bottom: 1rem;
              list-style: none;
              background-color: #fbfbfb;
              border-radius: 4px;


              li + li:before {
                content: "${props => props.separator}";
              }

              li + li {
                padding-left: 8px;
            }

              li + li::before {
              display: inline-block;
              padding-right: 0.5rem;
            }

            li a {
               font-size: 14px;
               transition: color .4s linear;
               color: ${props => (props.scheme === "red" ? "red" : "purple")};
               &:hover {
                color: black;
               }
            }
`;

Breadcrumb.propTypes = propTypes;
Breadcrumb.defaultProps = defaultProps;

export default Breadcrumb;

这是创建面包屑的主要标记。

App.js:

import React from 'react';
import Breadcrumb from './Breadcrumb';
import BreadcrumbItem from './BreadcrumbItem';

export default function App() {
  return (
    <div className="App">
      <Breadcrumb scheme="red">
        <BreadcrumbItem>
          <a href="/">Home</a>
        </BreadcrumbItem>
        <BreadcrumbItem>
          <a href="/">Shop</a>
        </BreadcrumbItem>
        <BreadcrumbItem active>
          <a href="/">Product</a>
        </BreadcrumbItem>
      </Breadcrumb>
    </div>
  );
}

我面临的问题是我想使用父 Breadcrumb 组件内的 BreadcrumbItem 组件的 active 属性来更改根据方案的项目的外观和感觉。

我发现第一种方法是在组件本身内部添加 BreadcrumbItem 样式并使用类似 ${props => props.active 的内容？ css``:css``}。但是 styled-component 中有没有办法访问父组件内的子组件 prop 呢？

请在样式组件的上下文中回答问题。

实时链接:Codesandbox

Answer 1

我建议移动列表项的样式，即<li> ，到它自己的组件，即 BreadcrumbItem 。在这种情况下，您不需要访问子组件的状态，而是需要处理 active状态为<li>风格。而且它看起来会更干净，并且关注点分离(React 推荐的)将会出现。

[编辑]:访问子项 Prop 的示例代码

const List = ({ children }) => {
  return (
    <ul>
      {React.Children.map(children, x => {
        console.log(x.props); // get props of children

        return x;
      })}
    </ul>
  );
};

const Item = ({ children }) => <li>{children}</li>;

export default function App() {
  return (
    <List>
      <Item>Hello</Item>
      <Item active>HI</Item>
    </List>
  );
}