如何使用 React 从 props 自定义组件的形状高度和宽度答案

【问题标题】：how to customize the shape height and width of a component from the props using react如何使用 React 从 props 自定义组件的形状高度和宽度
【发布时间】：2022-01-23 03:19:29
【问题描述】：

我正在使用React 和Typescript 并尝试创建一个方形组件，该组件基于传递给组件的自定义props 我可以将高度和宽度修改为其他任何东西，我指的是可以自定义高度和宽度。

目标：目前是基于scss的正方形，怎么能有人只通过customHeight和customWidth 的道具将其更改为矩形


# shomeShape.tsx

interface Props {
  customHeight?: string;
  customWidth?: string;
}

const SomeShape: React.FC<Props> = (props: Props): JSX.Element => {
  const { customHeight, customWidth } = props;

  return (
    <div className={styles.customContainer}> 
       Random Text
    </div>
  );
};

export default SomeShape;

# scss
.customContainer {
  width: 100px;
  height: 100px;
}

任何帮助将不胜感激

【问题讨论】：

标签： javascript reactjs typescript ecmascript-6

【解决方案1】：

您可以使用div 上的style 属性更改组件的形状。

interface Props {
  customHeight?: string;
  customWidth?: string;
}

const SomeShape: React.FC<Props> = (props: Props): JSX.Element => {
  const { customHeight, customWidth } = props;

  return (
    <div style={{
      height: customHeight || 100,
      width: customWidth || 100,
}}> 
       Random Text
    </div>
  );
};

export default SomeShape;

请注意，样式属性中提供的数字将被转换为像素值。

如果您希望您的应用使用类而不是内联样式（better for performance），请查看 CSS-in-JS 库，例如 emotion 或 styled-components。

【讨论】：

我想知道您是否有类似的方法但使用classNames，如果它实际上可以使用classNames 来完成
也许你可以在类中使用 CSS 自定义属性，但你仍然需要在 style 属性中设置自定义属性。如果您知道矩形可能的不同尺寸，您还可以为每组尺寸创建可能的类，然后根据 customWidth 和 customHeight 属性设置 className 属性。

【解决方案2】：

CSS 预处理器很棒，但是对于 React，你可以尝试一下 styled-components，这是一个很棒的工具，一旦你开始使用它就会非常感激

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

const StyledContainer = styled(({ customWidth, customHeight, children, ...props }) => 
<div {...props}>{children}</div>)`
  width: ${({ customWidth }) => customWidth}px;
  height: ${({ customHeight }) => customHeight}px;
`

interface Props {
  customWidth: string
  customHeight: string
}

const SomeShape: React.FC<Props> = ({ customWidth, customHeight }): JSX.Element => {
  return (
    <StyledContainer customWidth={customWidth} customHeight={customHeight}>
      Random Text
    </StyledContainer>
  )
}

export default SomeShape

这里这个 sn-p 假设 props customWidth 和 customHeight 只有像素数而不是单位 (customWidth = '750')，您可以将字符串作为值与他的单位 (customWidth = '75vw') 一起传递，在最后一种情况只是删除 width 和 StyledContainer 的 width 和 height 属性内的回调末尾的 px 单位

这样您就可以避免使用上一个答案中所说的性能较差的内联样式。

Styled-components 乍一看可能看起来很奇怪，但它是在 React 应用程序中编写 css 的绝佳工具。

【讨论】：

【解决方案3】：

这里是javascript版本。这是此代码的CodeSandbox。

import styled from "styled-components";
import "./styles.css";

const StyledContainer = styled.div`
  width: ${({ customWidth }) => (customWidth ? customWidth : "300px")};
  height: ${({ customHeight }) => (customHeight ? customHeight : "500px")};
  background-color: aqua;
`;

export default function App() {
  return (
    <div className="App">
      <StyledContainer customWidth={"300px"} customHeight={"70vh"}>
        Random Text
      </StyledContainer>
    </div>
  );
}

是否要在道具中传递单位取决于您。

【讨论】：