标签: jsx

我期待创建一个无状态组件,其输入可以由父元素验证.

在下面的示例中,我遇到了一个问题,即输入引用永远不会被分配给父的私有input属性.

什么时候ref叫,_emailAddress是handleSubmit.有什么我想念的,还是有更好的方法来做到这一点？

interface FormTestState {
    errors: string;
}

class FormTest extends React.Component<void, FormTestState> {
    componentWillMount() {
        this.setState({ errors: '' });
    }

    render(): JSX.Element {
        return (
            <main role='main' className='about_us'>             
                <form onSubmit={this._handleSubmit.bind(this)}>
                    <TextInput 
                        label='email'
                        inputName='txtInput'
                        ariaLabel='email'
                        validation={this.state.errors}
                        ref={r => this._emailAddress = r}
                    />

                    <button type='submit'>submit</button>
                </form>
            </main>
        );
    }

    private _emailAddress: HTMLInputElement;

    private _handleSubmit(event: Event): void {
        event.preventDefault();
        // this._emailAddress is undefined
        if (!Validators.isEmail(this._emailAddress.value)) {
            this.setState({ errors: 'Please enter an email address.' …

我有一个非常简单的功能组件，如下所示：

import * as React from 'react';

export interface AuxProps  { 
    children: React.ReactNode
 }


const aux = (props: AuxProps) => props.children;

export default aux;

还有另一个组件：

import * as React from "react";

export interface LayoutProps  { 
   children: React.ReactNode
}

const layout = (props: LayoutProps) => (
    <Aux>
        <div>Toolbar, SideDrawer, Backdrop</div>
        <main>
            {props.children}
        </main>
    <Aux/>
);

export default layout;

我不断收到以下错误：

[ts] JSX元素类型'ReactNode'不是JSX元素的构造函数。类型'undefined'不能分配给'ElementClass'类型。[2605]

如何正确输入？

我第一次做了一些Photoshop脚本,确实有一个类似console.log的函数可以在ExtendScript Toolkit App的Javascript控制台中输出数组和对象值.

有同等的功能吗？

我有一个对象包含多个常见的键值道具,我想传递给一些jsx.像这样的东西:

const commonProps = {myProp1: 'prop1',myProp2: 'prop2'};
<MyJsx commonProps />

我希望这个功能可以传递个别道具:

<MyJsx myProp1={commonProps.myProp1} myProp2={commonProps.myProp2}/>

这可能吗？

我已经四处寻找解决这个问题的方法了.所有这些都建议添加"jsx": "react"到您的tsconfig.json文件.我做了什么.另外一个是补充"include: []",我也做了.但是,当我尝试编辑.tsx文件时,我仍然收到错误.下面是我的tsconfig文件.

{
    "compilerOptions": {
        "module": "commonjs",
        "target": "es5",
        "allowJs": true,
        "checkJs": false,
        "jsx": "react",
        "outDir": "./build",
        "rootDir": "./lib",
        "removeComments": true,
        "noEmit": true,
        "pretty": true,
        "skipLibCheck": true,
        "strict": true,
        "moduleResolution": "node",
        "esModuleInterop": true
    },
    "include": [
        "./lib/**/*"
    ],
    "exclude": [
        "node_modules"
    ]
}

任何的意见都将会有帮助.我正在使用babel 7来编译env,react和typescript预设的所有代码.如果你们需要更多文件来帮助调试这个,请告诉我.

在 React 中使用 Typescript 时，我们必须jsx在文件compilerOptions中指定tsconfig.json。

它有preserve、react、react-native等react-jsx作为允许值。

{
  "compilerOptions": {
    "jsx": "react-jsx" | "react" | "react-native" | "preserve"
  }
}

react主要react-jsx用于网络我想了解这两个选项之间的区别以及何时选择哪一个

react将 jsx 翻译为React.createElement()

react-jsx将 jsx 翻译为_jsx()and_jsxs()

_jsx()还有和之间有什么区别_jsxs()？

我想知道是否可以嵌套if if else in reactjs jsx？

我尝试了各种不同的方法,但我无法让它发挥作用.

我在寻找

if (x) {
  loading screen
} else {
  if (y) {
    possible title if we need it
  }
  main 
}

我试过这个,但我不能让它渲染.我尝试了各种方法.一旦我添加了嵌套的if,它总是会中断.

  {
          this.state.loadingPage ?
            (<div>loading page</div>) :
            (<div>
               this.otherCondition && <div>title</div>
               <div>body</div>
            </div>)
        }

更新

我最终选择了解决方案将其移动到renderContent并调用该函数.这两个答案确实有效.我想我可以使用内联解决方案,如果它是一个简单的渲染和renderContent更复杂的情况.

谢谢

在 中@types/react，全局JSX命名空间已被弃用：

declare global {
    /**
     * @deprecated Use `React.JSX` instead of the global `JSX` namespace.
     */
    namespace JSX {
    ...
    }
}

由于我启用了 ESLintdeprecation/deprecation规则（来自 plugin eslint-plugin-deprecation），因此我现在收到函数组件返回类型的错误，如下所示：

export default function TestComponent(): JSX.Element { // This JSX is marked as deprecated
    return (
        <span>Test</span>
    );
}

JSX.Element既然全局命名空间已被弃用，那么在这种情况下，正确的返回类型替换是什么JSX？

是否React.JSX.Element如弃用消息中所述：

export default function TestComponent(): React.JSX.Element { ... }

或者是ReactElement这样的：

import { ReactElement } from "react";
export default …

我通过以下方式导入路由

import {Routes, Route, BrowserRouter} from 'react-router-dom'

我的包 JSON 是"react-router-dom": "^6.0.2",

我正在使用Pycharm。

npm list react-router-dom回报-- react-router-dom@6.0.2

为什么会发生这种情况？我的前端是空白的。

我正在使用react,我试图显示此错误消息,如果this.state.message === 'failed'.但我真的不确定为什么这个三元操作不起作用.我在这做错了什么？

render() {
...
<div className="row">
return (this.state.message === 'failed') ? ( => {
     <div className="alert alert-danger" role="alert">
       Something went wrong
     </div>
})() : false;
}
</div>

现在它只是return (this.state.message === 'failed') ? ( =>在html中显示