标签: jsx

我刚刚开始使用React Native并习惯了JSX语法.这就是我在说什么？或者我在谈论TypeScript？或者...... ES6？无论如何...

我见过这个:

const { foo } = this.props;

里面有一个类功能.花括号的目的是什么,使用它们和不使用它们之间的区别是什么？

我刚开始反应,我有点迷失.我正在尝试创建登录页面并发出http post请求.现在我只是想让任何类型的HTTP请求工作,所以我正在使用请求bin,我在npm包的文档中找到了这个基本操作(https://www.npmjs.com/package/redux -react-fetch):

export function updateTicket(ticketId, type, value){
  return {
    type: 'updateArticle',
    url: `http://requestb.in/1l9aqbo1`,
    body: {
      article_id: ticketId,
      title: 'New Title'
    },
    then: 'updateTicketFinished'
  }
}

所以,在写完一个动作之后,我该怎么办？我如何实际让我的应用程序调用并使用该操作？npm包的文档提到了在我的商店中设置状态的东西,我需要先设置一些东西吗？

我有这样的回答:

我想在这个HTML中显示每个对象的名称:

{subjects.map((item, i) => (
  <li className="travelcompany-input" key={i}>
    <span className="input-label">{ item.name }</span>
  </li>
))}   

但它会引发错误subjects.map is not a function.

首先,我必须定义对象的键,它创建一个键数组,我想循环并显示subject.names.

我也尝试过这个:

{Object.keys(subjects).map((item, i) => (
  <li className="travelcompany-input" key={i}>
    <span className="input-label">key: {i} Name: {subjects[i]}</span>
  </li>
))}

反应jsx：

<button ariaLabel='label'>click</button>

呈现的html：

<button arialabel="label">click</button>

控制台警告：

index.js:1 Warning: Invalid ARIA attribute `ariaLabel`. Did you mean `aria-label`?

嗯，不，我的意思是 ariaLabel，因为我们总是在 jsx 中使用驼峰命名法。为什么渲染的 html 中全部是小写？

Typescript引入了对JSX语法的支持.所以我的表达式与传统的*.ts文件非常相似,但没有*.tsx文件:

const f = <T1>(arg1: T1) => <T2>(arg2: T2) => {
   return { arg1, arg2 };
}

我想知道有没有办法让它在*.tsx文件中运行？

我无法在反应代码中删除以下警告." className这里不允许属性".

• PhpStorm中的警告

• 未知的HTML标记属性不能设置为camelcase只保存小写,并且关闭检查没有帮助.

• 设置中 Languages & Frameworks > JavaScript > Libraries

你能帮助我吗？我对jsx中的每个属性都有警告.编辑器设置jsx和谐.

任何人都知道如何正确添加/扩展自定义的HTML元素属性？

使用TypeScript文档来合并接口,我想我可以这样做:

interface HTMLElement {
    block?: BEM.Block;
    element?: BEM.Element;
    modifiers?: BEM.Modifiers;
}

<div block="foo" />; // error

但我在vscode 1.6.1(最新)中收到以下Intellisense错误:

[ts]'HTMLProps'类型中不存在属性'block'.

在HTMLProps它们指是React.HTMLProps<T>与div元素被声明为使用它像这样:

namespace JSX {
    interface IntrinsicElements {
        div: React.HTMLProps<HTMLDivElement>
    }
}

我试图重新宣布div,但无济于事.

相关:https://github.com/Microsoft/TypeScript/issues/11684

编辑:以下是最终为我工作的内容:

declare module 'react' {
    interface HTMLAttributes<T> extends DOMAttributes<T> {
        block?: string
        element?: string
        modifiers?: Modifiers // <-- custom interface
    }
}

当我以这种方式绑定时如何修复此错误:先前在构造函数中绑定已解决,但这对我来说有点复杂:

    {this.onClick.bind(this, 'someString')}>
and
     <form onSubmit={handleSubmit(this.handleFormSubmit.bind(this))}>

我正在尝试使用对象(而不是数组)在我的网站上呈现日记条目,我遇到了一个问题,这是我当前的代码

  populateJournal(){
const j = Object.values(this.state.journal);
var journalEntries = '';

  for (var i = 0; i < j.length; i++){
    journalEntries+=
      <div>
      <h3>{j[i].title} - {j[i].date}</h3>
      <p>{j[i].entry}</p>
      </div>;

  }

 return(<div>{journalEntries}</div>);

}

当我调用此函数时,它会呈现"<div>[object object]</div>"并且div之间的文本是纯文本.

当我将循环更改为" journalEntries = <div...."时,它会按预期呈现最后一个日记帐分录,但问题是它实际上并没有附加循环的日记帐分录.

想法？

我无法实现两个嵌套map:

render() {
    return (
      <table className="table">
        <tbody>
          {Object.keys(this.state.templates).map(function(template_name) {
            return (
              <tr key={template_name}><td><b>Template: {template_name}</b></td></tr>

              {this.state.templates[template_name].items.map(function(item) {
                return (
                  <tr key={item.id}><td>{item.id}</td></tr>
                )
              })}
            )
          })}
        </tbody>
      </table>
    )
  }

这给了一个SyntaxError: unknown: Unexpected token.

你如何map在JSX中嵌套调用？