我有这个:
import styled from 'react-emotion';
const Box = styled('div')`
display: flex;
flex-direction: ${p => p.direction};
`;
Box.defaultProps = {
direction: 'column'
};
当我使用 Box 组件时,它工作得很好。默认 Prop 如预期的那样存在。
但是,当我重用带样式的 Box 时,默认 Prop 不会被传递:
import styled from 'react-emotion';
import Box from './Box';
export const UniqResponsiveBox = styled(Box)`
// some media queries and other new styles
`;
当我使用 UniqResponsiveBox 时,它没有我为 Box 声明的 defaultProps。以下解决方法让我通过了,但似乎是多余的,我相信我错过了一些只能通过情感来完成的东西。
import styled from 'react-emotion';
const BoxContainer = styled('div')`
display: flex;
flex-direction: ${p => p.direction};
`;
function Box(props) {
return <BoxContainer {...props}/>
}
Box.defaultProps = {
direction: 'column'
}
import styled from 'react-emotion';
import Box from './Box';
export const UniqResponsiveBox = styled(Box)`
// some responsive queries and other uniq styles
`;
// In this scenario, the default props are there because I passed them explicitly. Helppp!
最佳答案
此特定问题是 Emotion 中的一个错误 - 它已在 a pull request 中修复这是 11 天前合并的,所以它应该出现在下一个版本中。
与此同时,避免附加功能的另一种解决方法是:
import styled from 'react-emotion';
import Box from './Box';
export const UniqResponsiveBox = styled(Box)`
// some media queries and other new styles
`;
UniqResponsiveBox.defaultProps = Box.defaultProps
关于javascript - react 情绪 : pass down defaultProps to in component reuse,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50219259/