标签: jsx

举个例子,设置一个你能做的反应风格

var css = {color: red}

和

<h1 style={css}>Hello world</h1>

为什么在第二个代码片段中需要围绕css的花括号？

在react中render()，当x的值等于1时，逻辑&&和三元运算符都会显示Hello，并且两者在语法上都是正确的。当我不想显示条件的其他部分时，我总是使用 && ，但我遇到过一个代码库，其中大多数地方都使用带有null 的三元运算符而不是 && 。使用一种方法相对于另一种方法是否有任何性能提升或任何其他优势？

return (
    <div>
        <div>{x === 1 && <div>Hello</div>}</div>
        <div>{x === 1 ? <div>Hello</div> : null}</div>
    </div>
);

我正在开发一个使用打字稿以及反应的项目,对两者都是新手.我的问题是关于打字稿中的界面以及它与道具和状态的关系.究竟发生了什么？除非我声明接口道具和状态,否则我的应用程序根本不会运行,但是我通过反应构造函数使用状态,并且我已经看到所有这些信息将进入"接口MyProps"或"接口MyStates"的示例例

"use strict";

import * as React from 'react'
import NavBar from './components/navbar.tsx'
import Jumbotron from './components/jumbotron.tsx';
import ContentPanel from './components/contentPanel.tsx';
import Footer from './components/footer.tsx';

interface MyProps {}
interface MyState {}
class Root extends React.Component <MyProps, MyState>  {
  constructor(props) {
    super(props);
    this.state = {
      ///some stuff in here

    };
  }
  render() {
    return (
      <div>
        <NavBar/>
        <Jumbotron content={this.state.hero}/>
        <ContentPanel content={this.state.whatIs}/>
        <ContentPanel content={this.state.aboutOne}/>
        <ContentPanel content={this.state.aboutTwo}/>
        <ContentPanel content={this.state.testimonial}/>
        <Footer content={this.state.footer}/>
      </div>
    )
  }
}
export default Root;

(我已经删除了this.state中的内容,只是为了在这里发布).为什么我需要界面？这样做的正确方法是什么,因为我认为我是以jsx方式而不是tsx方式考虑这个问题.

我正在使用create-react-app构建一个React应用程序.

运行ESLint时出现以下错误:
8:3 error 'document' is not defined no-undef.

我的应用程序运行没有错误,但我在2个文件中得到此ESLint错误.请参阅其中一个.jsx文件和我的ESLint配置.

index.jsx:

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import './index.css';

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

eslintrc.js:

module.exports = {
  "extends": "airbnb",
  "plugins": [
      "react",
      "jsx-a11y",
      "import"
  ],
  "env": {
    "jest": true
  }
};

我怎样才能解决这个问题 ？目前我只会忽略这两个文件......但我宁愿找到一个长期的解决方案.

我面临的问题是img标签.当涉及单个时,下面的代码加载图像:

import image1 from './images/image1.jpg;
<img src={image1} />

但是下面的代码没有加载:

 <img src={'./images/image1.jpg'}/>
            or
  <img src='./images/image1.jpg'/>

我需要循环浏览json,例如[{'img':'./ images/image1.jpg','name':'AAA'},{'img':'./ images/image2.jpg',' name':'BBB'}]并将每个显示为图片,名称为footer.循环很好,但图像无法加载.实际上我自己无法导入要添加的每个图像.我现在不使用除JSX以外的任何东西.请支持.

我有调度动作的功能.我想在动作之前和之后显示一个加载器.我知道组成传递给的对象的反应setState.问题是如何以异步方式更新属性:

handleChange(input) {
    this.setState({ load: true })
    this.props.actions.getItemsFromThirtParty(input)
    this.setState({ load: false })
}

基本上,如果我将此属性作为应用程序状态的一部分(使用Redux),这一切都很有用,但我真的更喜欢将此属性仅用于组​​件状态.

我使用 npx create-react-app 创建了这个应用程序。之后我删除了 src 文件夹中除 index.js 之外的所有文件。然后热重载不起作用。我已经转到 chrome 并手动刷新页面以查看更改。这是我的index.js文件。

import React from 'react';
import ReactDom from 'react-dom';

function Greeting() {
  return (
    <div>
      <h1>hello World</h1>
      <ul>
        <li>Click Here</li>
      </ul>
    </div>
  );
}

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

Package.json文件

{
  "name": "tutorial",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^5.11.4",
    "@testing-library/react": "^11.1.0",
    "@testing-library/user-event": "^12.1.10",
    "react": "^17.0.1",
    "react-dom": "^17.0.1",
    "react-scripts": "4.0.1",
    "web-vitals": "^0.2.4"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": …

我知道JSX可能会非常误导,因为它看起来像字符串,它不是,因此问题中的"字符串"术语,即使我们并没有真正操纵字符串.

这是一个代码示例(显然错误):

let line = <Line key={line.client_id} line={line}/>;
if(line.created_at) {
    return <div className="date-line"><strong>{line.created_at}</strong></div> + line;
} else {
    return chat_line;
}

我有一条线,我想在某些条件下"连接"前面的一些div.什么是正确的语法？我试过括号,括号,加号......它们似乎都不起作用......

谢谢

我使用sublime text 3作为我的代码编辑器,我在React中编写了一个基本的hello world示例.但是代码上的着色是不合适的,我尝试过安装Babel插件但是即使在那之后着色似乎也不起作用,如您所见,下图

我使用此代码从顶部边缘我的按钮：

const makeTopMargin = (elem) => {
    return styled(elem)`
        && {
            margin-top: 1em !important;
        }
    `;
}

const MarginButton = makeTopMargin(Button);

每当我使用MarginButton节点时，我都会收到此错误：Warning: PropclassNamedid not match. Server: "ui icon left labeled button sc-bwzfXH MjXOI" Client: "ui icon left labeled button sc-bdVaJa fKCkqX"

你可以在这里看到这个制作。

我该怎么办？