标签: tsx

type: 'dark'在直接功能之外的任何地方声明时，我无法使用 MUI 为我的网站定义“深色”主题createMuiTheme()。

例如，以下工作：

const siteTheme = createMuiTheme({
  palette: {
    primary: {
      light: '#484848',
      main: '#212121',
      dark: '#000000',
      contrastText: '#fff',
    },
    secondary: {
      light: '#b0ff57',
      main: '#76ff03',
      dark: '#32cb00',
      contrastText: '#000',
    },
    type: 'dark'
  },
})

但以下中断：

const theme = {
  palette: {
    primary: {
      light: '#484848',
      main: '#212121',
      dark: '#000000',
      contrastText: '#fff',
    },
    secondary: {
      light: '#b0ff57',
      main: '#76ff03',
      dark: '#32cb00',
      contrastText: '#000',
    },
    type: 'dark'
  },
}

const siteTheme = createMuiTheme(theme)

它给出的错误是

54 | …

我正在尝试显示一些反应错误消息并在 5 秒超时后隐藏它们。下面是代码：

import * as React from 'react'
import {ErrorInfo} from '../Twilio/api'
export const Error = ({type, message, visible}: ErrorInfo) => (
    // visible=true,
    setTimeout(function () {
        visible = false
    }, 5000),
        visible ?
            <div>
                <p>
                    <strong>{type}:</strong> {message}
                    <br/>
                    <small>
                        UI version: <code>{GLOBAL_VERSION}</code>
                    </small>
                </p>
            </div> : <span/>
)

ErrorInfo如下：

export type ErrorInfo = {
    type: string
    message: string
    visible: boolean
}

但是，visible被设置为未定义，因此不会显示错误消息。如果我在导出时将其设置为 true ，那么当它变为 false 时，元素不会被删除，从而Error显示它。Headervisible

我正在寻找如何在使用 Visual Studio 代码时在 .tsx 代码中使用 Region。在编辑器中，intelisense 显示 //#region 和 //#endregion （可能是由于某些扩展，例如 ES7 React/Redux/... 或 ESLint），但将其放入代码中后会出现错误。

有人知道如何使用它吗？

在使用 Next.js 开发我的个人作品集时，我遇到了一个错误，即“children”道具不起作用。我正在使用 tsx.

布局.tsx

import styles from "./layout.module.css";

export default function Layout({ children, ...props }) {
  return (
    <>
      <main className={styles.main} {...props}>{children}</main>
    </>
  );
}

我尝试使用其他道具，定义道具，就像我在网上教程中所做的那样，但它们都不起作用。;(

我正在尝试创建一个React无状态函数组件,如TypeScript 1.8 发行说明中所述.这编译没有错误但TypeError在运行时抛出.为什么？

我有一个界面

interface AppError {
  id: string;
  message: string;
}

我的组件如下所示:import*as React from"react";

import { AppError } from "../error.interface";

const ErrorMessage = (props: {key: string, error: AppError}) => (
  <div className="col-lg-12" id={this.props.error.id}>
    <h2 className="page-header"><small>{this.props.error.message}</small>  </h2>
  </div>
);

export default ErrorMessage;

它用于另一个组件,如下所示:

import * as React from "react";

import * as ErrorModel from "./../error.model";
import { AppError } from "./../error.interface";

import ErrorMessage from "./error.message.tsx";


export default class ErrorContainer extends React.Component<{}, ErrorContainerState> {

    constructor(props) { …

我对 JetBrains 产品有点熟悉，并且我知道我可以为我正在处理的文件设置样式。但是，我无法找到配置 .tsx 文件的位置以便看到我想要的样式。看来，TypeScript 部分的更改不会更改我的 .tsx 文件。

如下图所示，我有 .tsx 文件，并且我希望在之后{、之前}和之前都有空间/>。但是，在我点击command+ option+后，我的所有空格都被删除了L。

具备以下条件：

配置文件

{
  "compilerOptions": {
    "sourceMap": true,
    "target": "es5",
    "jsx": "react",
    "module": "commonjs",
    "moduleResolution": "node",
    "experimentalDecorators": true,
    "declaration": true,
    "outDir": "lib",
    "lib": ["es2015","dom"]
    }
}

注意声明：true

和.tsx文件：

import * as styledComponents from "styled-components";

export const backColor = (props: MyProps) => props.theme.backColor;

export const Title = styledComponents.div`  
   text-align: center;
   background-color:${backColor};
   width: 100%;
`;

当我tsc在终端上运行编译时，我得到：

错误 TS2339：属性 'div' 在类型 'typeof "/root/node_modules/styled-comp...' 上不存在。

更新

两种导入样式组件的方式都会发生错误

import styled from 'styled-components'
import * as styled from 'styled-components'

我正在构建这个组件来测试 react-spring 库。我在codeandbox上启动它，然后将它本地拉到我的电脑上。当我把它拉下来时，这个错误出现了，我不知道如何解释它或导致它的原因。我对打字稿很陌生，因此非常感谢任何帮助。

起初，我认为它可能是childrenprop 的错误类型，但后来意识到它实际上是widthand height，现在我不确定它是否是一个styled-components（因为错误出现在 下StyledCard）或者当你使用子渲染 prop 方法时你必须指定你的类型不同..

import * as React from "react"
import styled from "styled-components"

const StyledCard = styled.div`
  width: ${(props: any) => props.width}px;
  height: ${(props: any) => props.height}px;
  box-shadow: 0px 2px 4px -1px rgba(0, 0, 0, 0.2),
    0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12);
  text-align: center;
`

interface ICardProps {
  children?: React.ReactNode
  width?: number
  height?: number
} …

我有一个带有react-native的tsx文件。如果函数未设置为const或不显示此消息，则我的函数名称带有下划线：

找不到名称“ goBack”

goBack = () => {
    // do stuff
}

但是如果我设置const或让它起作用，它将起作用：

const goBack = () => {
    // do stuff
}

为什么呢

在 TSX HTML 标签中使用单引号比双引号有什么优势吗？

单引号：

<Table aria-label='simple table'>
  ...
</Table>

双引号：

<Table aria-label="simple table">
  ...
</Table>

为什么在另一个功能组件中定义一个 React 功能组件会破坏 CSS 转换？

function Doohick({isOpen}: {isOpen: boolean}) {
    const style = {
        transition: 'opacity 2s ease',
        ...(isOpen ? {opacity: 1} : {opacity: 0})
    }

    return (
        <div style={style}>
            Doohick!!!
        </div>
    )
}

function Parent() {
   const [open, isOpen] = useState(false)
   return (
     <>
        <button onClick={() => setIsOpen(!isOpen)}>Toggle Doohick</button>
        <Doohick isOpen={isOpen} />
     </>
   )
}

如果我定义Doohick在 之外Parent，如上所述，一切都会很好。如果我将定义移到 内部Parent，而不进行其他更改，我的 CSS 转换就会中断。其他 CSS 属性都很好。

为什么在另一个功能组件中定义一个功能组件会破坏 CSS 转换？

我为什么要这样做的复杂解释

我听到你问：我为什么要这么做？我会告诉你，但请记住，你不需要知道任何这些来理解具体问题。

我想将Doohick状态封装在自定义挂钩中：

function useDoohick() { …