标签: jsx

我对TypeScript有点熟悉,并且最近已经了解了JSX.他们似乎都和我相似.我在这个网站上查看了与JSX的比较,他们将它与Dart和其他一些技术进行了比较,但没有将它与TypeScript进行比较.

TypeScript和JSX似乎都编译为JavaScript并提供静态类型和类,但它们似乎是互补的而不是竞争对手,根据网络上的一些地方,如TypeScript和JSX.

我试图让它不太开放,所以有人能告诉我TypeScript提供的功能是什么,JSX没有,反之亦然？

我想知道从同一个组件访问我的渲染函数中的DOM元素的最佳实践是什么.请注意,我将在页面上多次渲染此组件.

例如

var TodoItem = React.createClass({
    ...
    render:function(){

        function oneSecLater(){
            setTimeout(function(){
            //select the current className? this doesn't work, but it gives you an idea what I want.
            document.getElementsByClassName('name').style.backgroundColor = "red";
                )}, 1000);
        }

        return(
            <div className='name'>{this.oneSecLater}</div>
        )



})

所以我无休止地在网上搜索以解决这个问题。

"support for the experimental 'jsx' isn't currently enabled...
Add @babel/preset-react to the 'presets' section of your Babel config to enable transformation.
If you want to leave it as-is, add @babel/plugin-syntax-jsx to the 'plugins' section to enable parsing."

所以我有很多（比如 100 个）这样的错误，所以我改变了我的 .babelrc 和 .babel.config.js 看起来像：

{
test: /\.jsx?$/,
exclude: [/node_modules/],
use: [
{
    loader: 'babel-loader',
    options: {
    presets: [
        '@babel/preset-env',
        '@babel/preset-react',{
        'plugins': [
            ["@babel/plugin-proposal-class-properties", { "loose": true }]
        ]}]
    }
}]}

和配置：

"presets": [
    "react",
    "@babel/preset-env",
    "@babel/preset-typescript",
    "@babel/preset-react"
  ],
  "plugins": …

VSCode似乎不会自动缩进jsx中的HTML元素？

有没有办法解决它.

更新:

在Atom中:

当我输入时<div>,atom将显示:

按下return键后,结果是(注意光标的位置):

在VSCode中:

我刚开始学习React并且遇到了这个错误.

未捕获的TypeError:无法在新路由器上读取未定义的属性"pathname"

这是我的代码:

var React = require('react');
var ReactDOM = require('react-dom');
var { Route, Router, IndexRoute } = require('react-router');
var hashHistory = require('react-router-redux')

var Main = require('./components/Main');

ReactDOM.render(
    <Router history={hashHistory}>
        <Route path="/" component={Main}>

        </Route>
    </Router>,
  document.getElementById('app')
);

我以下的教程使用React-Router 2.0.0,但在我的桌面上我使用的是4.1.1.我尝试搜索更改,但未能找到有效的解决方案.

"dependencies": {
"express": "^4.15.2",
"react": "^15.5.4",
"react-dom": "^15.5.4",
"react-router": "^4.1.1",
"react-router-dom": "^4.1.1",
"react-router-redux": "^4.0.8"

在典型的基于类的React组件中，这就是创建事件处理程序的方式：

class MyComponent extends Component {
  handleClick = () => {
    ...
  }

  render() {
    return <button onClick={this.handleClick}>Click Me</button>;
  }
}

但是，当我使用基于钩子的功能范例时，发现有两个选择：

const MyComponent = () => {
  const [handleClick] = useState(() => () => {
    ...
  });

  return <button onClick={handleClick}>Click Me</button>;
};

或者：

const MyComponent = () => {
  const handleClick = useRef(() => {
    ...
  });

  return <button onClick={handleClick.current}>Click Me</button>;
};

客观上哪个更好，出于什么原因？还有我还没有听说过的（更好）方法吗？

谢谢您的帮助。

编辑：我在CodeSandbox上放了一个示例，显示了这两种方法。正如您从那里的代码可以看到的那样，似乎都没有必要在每个渲染器上重新创建事件处理程序，因此，我认为不可能出现性能问题。

当我使用 Create React App 创建 React 应用程序时，默认情况下包含 ESLint。这就是为什么我们不想手动集成 ESLint。但是，当我使用Vite创建 React 应用程序时，不存在任何类型的 linting，如ESLint或JSLint。

如何在Vite+React项目中安装ESLint？

如何在VSX标记中使用组件时使VS代码自动完成React组件的prop类型？

PS:我使用的是JS,而不是TS.

Vite 默认不允许在 .js 文件中使用 JSX 语法。

我已经将我的文件重命名为.jsx（或.tsx)，但我有无法重命名的外部依赖项。

Vite 的错误示例：

\xe2\x9c\x98 [ERROR] The JSX syntax extension is not currently enabled\n\n    node_modules/somelib/src/someFile.js:122:11:\n      122 \xe2\x94\x82     return <div/>\n

如何配置 Vite 支持所有 .js 文件中的 JSX 表达式？

我在一些React文档以及截屏视频中都有这个.人们会{ " " }在他们的JSX模板中写.

他们为什么这样做呢？看起来他们正在使用它作为换行符的替代品,但我没有看到任何地方明确解释过.