我遇到一个问题,有一个名为 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
最佳答案
我建议移动列表项的样式,即<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>
);
}
关于styled-components - 访问父组件内的子组件 prop,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/61953446/