访问父组件中的子组件支柱。

Question

我面临一个问题，有一个名为Breadcrumb的样式组件，但是该组件依赖于一个单独的样式组件，即BreadcrumbItem。这两个组件都有不同的道具。

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;

这是创建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>
  );
}

我面临的问题是，我希望使用父active组件内的BreadcrumbItem组件的BreadcrumbItem支柱来根据方案更改项目的外观和感觉。

我找到了第一种方法，即在组件本身中添加BreadcrumbItem样式，并使用类似于这个${props => props.active ? css`` : css``}的东西。但是，在styled-component中是否有一种方法可以访问父组件中的子组件prop？

请在styled-components上下文中回答这个问题。

实时链接：码箱

Answer 1

我建议将列表项的样式，即<li>，移动到它自己的组件，即BreadcrumbItem。在这个场景中，您不需要访问子组件的状态，而是以<li>样式处理<li>状态。而且它看起来会更干净，关注点的分离(反应建议)也会出现。

编辑：用于访问儿童道具的示例代码

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