Reactjs 样式化组件，引用其他组件并使用其道具？

我该怎么做

img

作为

的道具传递，我想在

悬停时更改孩子的背景图像

const Child=styled.div`
`;
const Parent=styled.div`
&：悬停{
${Child}{
背景图像：url（${props=>props.img}）；
}
}
`;

所以，我确实设法解决了部分问题（也许剩下的问题对你来说并不重要，让我知道）

首先是小提琴，然后是解释：

const img1=”https://images.pexels.com/photos/2047905/pexels-photo-2047905.jpeg?cs=srgb&dl=apple-设备-art-COLORIC-2047905.jpg&fm=jpg”；
常数img2=”https://images.pexels.com/photos/2027104/pexels-photo-2027104.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940";
常数img3=”https://images.pexels.com/photos/2029478/pexels-photo-2029478.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940";
window.styled=window.styled.default；
功能更改背景（道具）{
if（Array.isArray（props.children））{
让我们一起来；
props.children.forEach（el=>{
if（el.type.styledComponentId===Child.styledComponentId）{
a=el.props.bgImg；
}
});
返回a；
}否则{
返回（props.children.type.styledComponentId==Child.styledComponentId）
？props.children.props.bgImg
: ""
}    
}
const Child=styled.div`
宽度：200px；
高度：100px；
边框：1px纯绿色；
背景图像：url（“${img2}”）；
背景尺寸：包含；
`;
const Parent=styled.div`
宽度：400px；
高度：200px；
边框：1px实心rgba（0,0,0,0.5）；
&：悬停{
${Child}{
背景图片：url（${props=>changeBG（props）}）；
}
}
`;
类应用程序扩展了React.Component{
建造师（道具）{
超级（道具）；
}
render（）{
返回(
);
}
}
ReactDOM.render（，document.getElementById（'root'））；

const img1=”https://images.pexels.com/photos/2047905/pexels-photo-2047905.jpeg?cs=srgb&dl=apple-设备-art-COLORIC-2047905.jpg&fm=jpg”；
常数img2=”https://images.pexels.com/photos/2027104/pexels-photo-2027104.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940";
常数img3=”https://images.pexels.com/photos/2029478/pexels-photo-2029478.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940";
window.styled=window.styled.default；
功能更改背景（道具）{
console.log（props.children）；
if（Array.isArray（props.children））{
让我们一起来；
props.children.forEach（el=>{
if（el.type.styledComponentId===Child.styledComponentId）{
a=el.props.bgImg；
}
});
返回a；
}否则{
返回（props.children.type.styledComponentId==Child.styledComponentId）
？props.children.props.bgImg
: ""
}    
}
const Child=styled.div`
宽度：200px；
高度：100px；
边框：1px纯绿色；
背景图像：url（“${img2}”）；
背景尺寸：包含；
`;
const Parent=styled.div`
宽度：400px；
高度：200px；
边框：1px实心rgba（0,0,0,0.5）；
&：悬停{
${Child}{
背景图片：url（${props=>changeBG（props）}）；
}
}
`;
类应用程序扩展了React.Component{
建造师（道具）{
超级（道具）；
}
render（）{
返回(
);
}
}
ReactDOM.render（，document.getElementById（'root'））；

---

希望这能对您有所帮助

   &:hover ${Child}{
      background-image: url(${props => props.image && css`${props.image}`});
   }

下面是一个工作示例

---

更新代码

在子级而不是父级中使用悬停代码。一切都很好。我还更新了pen（）中的代码

---

我猜这是因为“img”被传递给了Child而不是Parent，但是你在Parent内部访问它。正如郝鹏所说，在这种情况下，

props

包含了

Parent

组件的props，而不是

Child

组件的props。您是否只需要使用

样式化组件

来实现您的目标，或者您可以使用JS来解决一些问题？编辑：了解孩子是否总是父母的唯一孩子会很有用；如果是这样，我可以向您展示一个只使用样式化组件的解决方案，因为您将

图像

传递到

，如果我希望

图像

传递到

，我不希望

使用其父级的道具，这会使代码难看。我在给定的笔中更新了代码。您可以从子对象传递道具，并可以在悬停时更改背景。

const Child = styled.div`
   ${Parent}:hover & {
      background-image: url(${props => props.image && css`${props.image}`});
  }
`;