React TypeScript 样式报错

代码如下:

报错内容:

Type '{ flexDirection: string; }' is not assignable to type 'Properties<string | number, string & {}>'.

Types of property 'flexDirection' are incompatible.

Type 'string' is not assignable to type 'FlexDirection | undefined'.ts(2322)

index.d.ts(1942, 9): The expected type comes from property 'style' which is declared here on type 'DetailedHTMLProps<HTMLAttributes, HTMLDivElement>'

解决方案 1:

typescript 复制代码
const myStyle = {
  flexDirection: "column",
} as React.CSSProperties;

解决方案 2:

typescript 复制代码
class MyView extends Component {
  render() {
    return <div style={myStyle as React.CSSProperties}>my view</div>;
  }
}
相关推荐
Coding的叶子2 分钟前
React Flow 简介:构建交互式流程图的最佳工具
前端·react.js·流程图·fgai·react agent
apcipot_rain5 小时前
【应用密码学】实验五 公钥密码2——ECC
前端·数据库·python
ShallowLin5 小时前
vue3学习——组合式 API:生命周期钩子
前端·javascript·vue.js
Nejosi_念旧5 小时前
Vue API 、element-plus自动导入插件
前端·javascript·vue.js
互联网搬砖老肖5 小时前
Web 架构之攻击应急方案
前端·架构
pixle06 小时前
Vue3 Echarts 3D饼图(3D环形图)实现讲解附带源码
前端·3d·echarts
麻芝汤圆7 小时前
MapReduce 入门实战:WordCount 程序
大数据·前端·javascript·ajax·spark·mapreduce
juruiyuan1118 小时前
FFmpeg3.4 libavcodec协议框架增加新的decode协议
前端
读心悦8 小时前
CSS结构性伪类、UI伪类与动态伪类全解析:从文档结构到交互状态的精准选择
css·ui·交互
Peter 谭9 小时前
React Hooks 实现原理深度解析:从基础到源码级理解
前端·javascript·react.js·前端框架·ecmascript