如何将 Height 属性添加到自定义 React 组件答案

【问题标题】：How to add a Height property to a custom React Component如何将 Height 属性添加到自定义 React 组件
【发布时间】：2021-06-25 11:07:58
【问题描述】：

嘿，我正在创建一个包含两个文本框的 React 表单。我创建了一个自定义文本框，但我希望它们具有不同的高度，我该如何实现呢？

form.js

 <Label>Job Description</Label>
            <Textarea
              type="textarea"
              name="description"
              focus={isFocused}
              value={description}
              onFocus={handleOnFocus}
              onChange={handleTitleChange}
            />
            <Label>Job Requirements</Label>
            <Textarea
              type="textarea"
              name="requirement"
              focus={isFocused}
              value={requirement}
              onFocus={handleOnFocus}
              onChange={handleTitleChange}
            />

样式化组件

const Textarea = styled.textarea`
  width: 100%;
  border: 1px solid #d3d3d3;
  outline: none;
  resize: none;
  transition: 0.1s ease-out;
  height: 80px;
  background-color:white;

`;

现在我已将高度指定为 80 像素，但我希望 Job requirement 文本框为 40 像素

【问题讨论】：

标签： css reactjs styled-components

【解决方案1】：

可以通过 props 配置

<Textarea type="textarea" name="description" height="40px" />
<label>Job Requirements</label>
<Textarea type="textarea" name="requirement" height="80px" />

然后

const Textarea = styled.textarea`
 width: 100%;   
 border: 1px solid #d3d3d3;
 outline: none;  
 resize: none; 
 transition: 0.1s ease-out; 
 height: ${(props) => props.height};  
 background-color: white; `;

检查我的 sandbox

【讨论】：

谢谢你的朋友

【解决方案2】：

将此行添加到您在其他样式下方声明样式化组件 Textarea 的位置，

  ${props => props.smallTextBox && css`
    height: 40px;
  `}

然后当你声明你的组件时

<Textarea
  smallTextBox
  type="textarea"
  ...otherProps
/>

【讨论】：