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

Posted 2023-02-22

【中文标题】如何使用 React 从 props 自定义组件的形状高度和宽度

【英文标题】：how to customize the shape height and width of a component from the props using react

【发布时间】：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;

任何帮助将不胜感激

【参考方案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 ) => customWidthpx;
  height: $( customHeight ) => customHeightpx;
`

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>
  );

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