Question

请考虑此打字稿功能

 function button(style: any, func: ()=>void, img: string) {
    return (
      <button
        className="Reader_Button"
        style={style}
        onClick={func}
      >
        <img src={img} alt="" />
        Back
      </button>
    );
  }

第一个参数style的正确类型是什么？我觉得它应该像HTMLElementStyle，但我无法找到正确的咒语。

对不起，我还不够清楚。我想知道用什么类型替换＆＃34;任何＆＃34;在style: any。打字稿定义处理检查所提供对象成员的类型。

我正在谈论功能的定义，而不是应用。

Answer 1

类型为React.CSSProperties。您可以通过编写<div style={{}}>并在将光标置于style属性时按 F12 在VSCode中找到此内容。

Answer 2

常规DOM元素的样式prop应该是一个对象的形式，其中键是css属性。

实施例： <div style={{ width: "100%", backgroundColor: "black" }} />

请注意，对于包含破折号的属性，它们会变成驼峰。例如，background-color变为backgroundColor。

React style documentation

Answer 3

对我来说“从 csstype 导入 CSS”&& 换行到引号 'maxHeight': '120px'

import React from 'react';
import CSS from 'csstype';
    
const shortList = () => {
    const listStylus: CSS.Properties = {
        'maxHeight': '120px',
        'overflow': 'hidden',
      }
    
      return (
        <div>
          <ul style={listStylus} >
            <li>Item element 1</li>
            <li>Item element 2</li>
          </ul>
        </div>
      )
}

export default shortList

传递给函数

3 个答案: