Question

我猜测它们是相同的，因为输出是相同的，但这是Redux的正式缩写还是Javascript属性？我遵循了Redux documentation，并具有这样一个组成部分：

const App = () => (
  <div>
    <AddTodo />
    <VisibleTodoList />
    <Footer />
  </div>
)

和其他组件：

const AddTodo = ({ dispatch }) => {
  let input

  return (
    <div>
      <form
        onSubmit={e => {
          e.preventDefault()
          if (!input.value.trim()) {
            return
          }
          dispatch(addTodo(input.value))
          input.value = ''
        }}
      >
        <input ref={node => (input = node)} />
        <button type="submit">Add Todo</button>
      </form>
    </div>
  )
}

我想知道这与Javascript还是React有关。

我了解在Javascript中，箭头函数需要具有（）之类的

(name, description) => ({name: name, description: description});

描述它是一个对象，而不是内联单表达式语法的普通函数，但是由于JSX部分不是对象，因此我不确定在Redux示例中是否适用于此。请帮我解决我的错误。

Answer 1

答案很简单，是的，因为JSX和React遵循JavaScript使用的语法完全相同，因为JSX只是React的语法扩展。您可以通过here阅读有关JSX的更多信息。

此外，关于您关于redux的观点，您的redux应该纯粹用JavaScript（或TypeScript）编写，没有任何JSX语法，因为redux存储的主要目的是保持应用程序的状态，而不是呈现逻辑。

Answer 2

主要是为了提高可读性，您可以省略括号，并且功能相同

const App = () => 
  <div>
    <AddTodo />
    <VisibleTodoList />
    <Footer />
  </div>

但是当您在组件内部有一个主体并且想要在新行上返回JSX时，必须用括号括起来以避免ASCI（自动分号插入）

const App = () => {
  const x = 'something'

  return (
    <div>
      <AddTodo />
      <VisibleTodoList />
      <Footer />
    </div>
  )
}

const Component =（）=>（<div> </div>）与React中的const Component =（）=> {return（<div> </div>）}相同吗？

2 个答案: