Question

我第一次使用reactled-component和react.js。我的代码在Abc.js和styles.js中，我有样式组件代码。

 export const StyledPopopDiv = styled.div`
  width: 200px;
  height: 100px;
  background: #cecece;
  position: fixed;
  z-index: 200;
  left: ${state => state.pos.x}px;
  top: {state.pos.y}px;
`;
StyledPopopDiv.displayName = 'StyledPopopDiv';

我正在尝试在样式组件中传递state.pos.x，但这会给出错误Cannot read property 'x' of undefined。

我不知道该怎么做。请帮忙。

Answer 1

您应该首先将状态作为道具传递给样式化组件示例：

// Abc.js

<StyledPopopDiv pos={posState} />

所以你可以在你的样式组件定义上使用这个 prop，如下所示：

//styled.js 

 export const StyledPopopDiv = styled.div`
  width: 200px;
  height: 100px;
  background: #cecece;
  position: fixed;
  z-index: 200;
  left: ${ props => props.pos.x}px;  // outputs '10px' in this example
  top: ${ props => props.pos.y}px;  // outputs '20px' in this example
`;

更好的方法/技巧是使用销毁/扩展运算符示例：

 export const StyledPopopDiv = styled.div`
  width: 200px;
  height: 100px;
  background: #cecece;
  position: fixed;
  z-index: 200;
  left: ${ ({ pos }) => pos.x}px; 
  top: ${ ({ pos }) => pos.y}px;
`;

Answer 2

假设您在Abc.js渲染中使用StyledPopupDiv，它应该是props而不是状态。

Answer 3

interface StyledPopupDivProps{
x:string
}

export const StyledPopopDiv =
styled<LinkProps, "div">("div")`
margin: ${props=>props.x}
`;

并传递

<StyledPopupDiv x={intendedValue}/>

正在使用它。

在react.js中使用styled-component

3 个答案: