在反应风格的组件中使用道具答案

【问题标题】：Using props inside react styled components在反应风格的组件中使用道具
【发布时间】：2018-11-25 23:36:45
【问题描述】：

我正在使用 React styled-components 库为我的应用程序设置样式，但偶然发现了一个问题，即我无法根据传递给组件的 props 分配 CSS 属性。

import React from 'react'
import styled from 'styled-components'

const Bar = styled.div`
  width: ${props => props.fraction}px;
`
const bar = (props) => {
return (
  <Bar>{props.fraction}</Bar>
  )
};

export default bar

分数道具从父组件传递并在样式组件内部完美输出，但是在样式中分配的宽度属性在只有 px 的开发人员工具中交叉，因此分数数字甚至没有到达那里。

如果有任何帮助，我将不胜感激！非常感谢

【问题讨论】：

标签： javascript css reactjs styled-components

【解决方案1】：

您应该将fraction 作为属性传递给 Bar 组件，如下所示：

cost BarComponent = ({ fraction }) => (
  <Bar fraction={fraction}>{fraction}</Bar>
);

【讨论】：