访问父组件内的子组件道具

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;

面包屑.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>
  );
}

我面临的问题是我想使用父BreadcrumbItem组件内部的active prop来根据方案更改项目的外观。

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

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

直播链接：Codesandbox

Answer 1

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

[EDIT]：访问孩子道具的示例代码

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