我设置eslint及eslint-plugin-react.

当我运行ESLint时,linter返回no-unused-vars每个React组件的错误.

我假设它没有意识到我正在使用JSX或React语法.有任何想法吗？

例:

app.js

import React, { Component } from 'react';
import Header from './header.js';

export default class App extends Component {
  render() {
    return (
      <div>
        <Header />
        {this.props.children}
      </div>
    );
  }
}

Linter错误:

/my_project/src/components/app.js
  1:8  error  'React' is defined but never used   no-unused-vars
  2:8  error  'Header' is defined but never used  no-unused-vars

这是我的.eslintrc.json档案:

{
    "env": {
        "browser": true,
        "es6": true
    },
    "extends": "eslint:recommended",
    "parserOptions": {
        "ecmaFeatures": {
            "experimentalObjectRestSpread": true, …

我正在尝试创建一个Autocomplete实质上仅向用户显示搜索结果的 Material UI 组件。某些选项的名称可能会重复，但它们都有唯一的 ID。我收到以下警告：

\n

index.js:1 警告：遇到两个具有相同键的子项，Name B。密钥应该是唯一的，以便组件在更新时保持其身份。非唯一的键可能会导致子项重复和/或省略 \xe2\x80\x94 该行为不受支持，并且可能在未来版本中更改。

\n

const SearchField = () => {\n    const [open, setOpen] = React.useState(false)\n    const [searchQuery, setSearchQuery] = React.useState('')\n    const [searchResults, setSearchResults] = React.useState([])\n    const loading = true //later\n\n    const debounced = useDebouncedCallback(\n        async searchQuery => {\n            if (searchQuery) {\n                let result = await doSearch(searchQuery)\n                if (result.status === 200) {\n                    setSearchResults(result.data)\n                } else {\n                    console.error(result)\n                }\n            }\n        },\n        1000\n    )\n\n    const handleInputChange = e => …

有没有办法在Visual Studio Code中使用组件或HTML完成？因为当我们有像Bootstrap等类这样的类时,手动输入每个字母并不是一个好主意.例如,在Emmet中完成:ul>li*2>a

var React = require('react');

var Header = React.createClass({
    render: function () {
        return (

            <nav className="navbar navbar-defaullt">
                <div className="container-fluid">
                    <a href="/" className="navbar-brand">
                        <img width="50" height="50" src="images/logo.png" alt="logo" />
                    </a>
                    <ul className="nav navbar-nav">
                        <li><a href="/">Home</a></li>
                        <li><a href="/#about">About</a></li>
                    </ul>
                </div>
            </nav>

                );
                }
                });
module.exports  = Header;

我有一个复选框TSX(JSX)元素:

<input type="checkbox" name={i.toString()} onClick={this.handleCheckboxClick} />

在VS代码的帮助下,我知道输入参数类型this.handleCheckboxClick是MouseEvent<HTMLInputElement>.所以我实现了它:

private handleCheckboxClick(event: MouseEvent<HTMLInputElement>) {
    ...
}

然后我收到错误说明[ts] Type 'MouseEvent' is not generic.如下图所示:

我的包的版本:

"@types/react": "^15.0.29",
"@types/react-dom": "^15.5.0",
"react": "^15.6.1",
"react-dom": "^15.6.1",
"typescript": "^2.3.4",

这是为什么？

我想在一些嵌入式html中调用一个函数.我尝试了以下但是没有调用该函数.这是在render方法中调用函数的错误方法吗？

import React, { Component, PropTypes } from 'react';

export default class PatientTable extends Component {
      constructor(props) {
        super(props);
        this.state = { 
         checking:false
      };
        this.renderIcon = this.renderIcon.bind(this);
  }

  renderIcon(){
    console.log("came here")
    return(
      <div>Function called</div>
    )
  }

  render() {

   return (
       <div className="patient-container">

       {this.renderIcon}      

      </div>
   );
 }
}

当我使用react-easy-crop库中的“Cropper”时出现此错误，我尝试了在论坛上找到的一些方法，例如添加@types/react、从“react”导入*作为React，但似乎没有任何效果工作。

这是给我带来麻烦的代码：

import * as React from "react";
import Cropper from "react-easy-crop";

export default function CropperPage({action , valuePro}: any) {
   return (
     <Cropper //  <-- This is giving me the error
        cropShape= "round"
        disableAutomaticStylesInjection="true"
        image={image}
        crop={crop}
        zoom={zoom}
        aspect={1}
        onCropChange={setCrop}
        onZoomChange={setZoom}
        onCropComplete={onCropComplete}
    />
   );
}

整个错误信息是：

Blockquote JSX 元素类不支持属性，因为它没有“props”属性。ts(2607)“Cropper”不能用作 JSX 组件。其实例类型“Cropper”不是有效的 JSX 元素。类型“Cropper”缺少类型“ElementClass”中的以下属性：context、setState、forceUpdate、props、refsts(2786)（别名）class Cropper import Cropper

Import_this

import {AppRegistry, Text, View, Button, StyleSheet} from 'react-native';

这是我的React Button代码但风格不起作用Hare ...

<Button
  onPress={this.onPress.bind(this)} 
  title={"Go Back"}
  style={{color: 'red', marginTop: 10, padding: 10}}
/>

我也试过这个代码

<Button 
       containerStyle={{padding:10, height:45, overflow:'hidden', 
       borderRadius:4, backgroundColor: 'white'}}
       style={{fontSize: 20, color: 'green'}} 
       onPress={this.onPress.bind(this)} title={"Go Back"}
      > Press me!
</Button>

更新问题:

我也是这样尝试..

<Button
    onPress={this.onPress.bind(this)}
    title={"Go Back"}
    style={styles.buttonStyle}
>ku ka</Button>

样式

const styles = StyleSheet.create({
    buttonStyle: {
        color: 'red',
        marginTop: 20,
        padding: 20,
        backgroundColor: 'green'
    }
});

但没有输出:我的手机截图: -

我在index.js中有以下代码段

class App extends Component {
render() {
    return ( <div style = { styles.app } >
        Welcome to React!
        </div>
    )
}

}
代码工作,但每次我保存(Ctrl + S)的Visual Studio格式的JSX这样的:

class App extends Component {
render() {
    return ( < div style = { styles.app } >
        Welcome to React!
        <
        /div>
    )
}

}

我怎么解决这个问题？谢谢

我正在尝试在示例应用程序中设置react-router,我收到以下错误:

You should not use <Link> outside a <Router>

我的应用程序设置如下:

父组件

const router = (
  <div className="sans-serif">
    <Router histpry={browserHistory}>
      <Route path="/" component={Main}>
        <IndexRoute component={PhotoGrid}></IndexRoute>
        <Route path="/view/:postId" component={Single}></Route>
      </Route>
    </Router>
  </div>
);

render(<Main />, document.getElementById('root'));

儿童/ Main组件

export default () => (
  <div>
    <h1>
      <Link to="/">Redux example</Link>
    </h1>
  </div>
)

知道我在这里做错了吗？

这是一个用于演示问题的Sandbox链接.

我是React的新手,我正试图为Meteor设置它并从其他来源拼凑起来.其中一个其他来源为应用程序设置了控制台日志记录,但我将采用ES6/JSX方式,因此只使用他们的代码对我来说不起作用(或者它似乎不是这样).

我找到的一些代码是

import Logger from 'simple-console-logger';
Logger.configure({level: 'debug'});

但我看到了这个错误

我也尝试使用react-logger,react-console-logger但无济于事.这是我后者的代码,我认为应该可行.

import {Logger, ConsoleLogger} from 'react-console-logger';
const myLogger = new Logger();
export default class App extends Component {
    render() {
        myLogger.info('something witty');
    }
}

但是,myLogger.info('...')正在调用node_modules/react-console-logger/lib/Logger.js它被定义为

并且this.logger未定义,虽然我看到它在上面被定义了？

有谁知道我做错了什么？它看起来像库有错误,但也许它与我使用JSX文件而不是js有关？