我正在尝试将 Prop 传递给我的样式组件。我正在使用样式组件 npm 依赖项。
import React, { Component } from 'react';
import styled from 'styled-components';
class WidgetContainer extends Component {
render() {
return (
<Wrapper name='widget-container'>
</Wrapper>
);
}
}
const mapStateToProps = state => {
return {
user: state.user,
bannerStatus: true
};
};
export default withRouter(connect(mapStateToProps)(WidgetContainer));
const Wrapper = styled.div`
display: flex;
flex-direction: column;
width: 100%;
min-height: 100vh;
margin: auto;
align-items: center;
justify-content: flex-start;
background: -webkit-linear-gradient(top, rgba(162, 209, 234, 1) 0%, rgba(56, 83, 132, 1) 100%);
padding-top: ${(props) => {
console.log(props.bannerStatus)
console.log('DATA')
return props.user ? '160px' : '126px'}};
overflow-y: auto;
padding-bottom: 40px;
@media(max-width: 768px) {
padding-top: 126px;
padding-bottom: 5px;
}
`;
您可以看到的 console.log 返回 undefined。即使该值是硬编码的。结果,三元运算符不起作用。
以下是文档:https://www.styled-components.com/docs/basics#adapting-based-on-props .
最佳答案
您仅在 WidgetContainer
中将状态映射到 Prop .您的 Wrapper
组件没有被传递任何 Prop 。
尝试<Wrapper bannerStatus={props.bannerStatus} name='widget-container'></Wrapper>
或 <Wrapper user={props.user} bannerStatus={props.bannerStatus} name='widget-container'></Wrapper>
.
关于reactjs - 样式组件不带 Prop ,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51145692/