在 React/Redux 中模块化代码

Question

主要问题

我习惯于将 React 与 ES6 类一起使用。我还习惯于将部分代码模块化为单独的函数。我正在查看以下示例，并试图弄清楚如何将 onSubmit 的值作为一个单独的函数。

import React from 'react'
import { connect } from 'react-redux'
import { addTodo } from '../actions'
let 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>
)
}
AddTodo = connect()(AddTodo)
export default AddTodo

我试过这样的事情：

import React from 'react'
import { connect } from 'react-redux'
import { addTodo } from '../actions'
function handleSubmit(e){
e.preventDefault()
if (!input.value.trim()) {
return
}
dispatch(addTodo(input.value))
input.value = ''
}
let AddTodo = ({ dispatch }) => {
let input
return (
<div>
<form onSubmit={e => handleSubmit(e)}>
<input ref={node => {input = node }}
/>
<button type="submit">
Add Todo
</button>
</form>
</div>
)
}
AddTodo = connect()(AddTodo)
export default AddTodo

但是，它当然不起作用，因为它无法识别输入变量。我可以将输入变量传递给函数，但这似乎不是正确的方法。

问题2：

我不熟悉以下代码段在做什么：

let AddTodo = ({ dispatch }) => {

它究竟是从哪里得到调度的？调度值是否传递到匿名函数中？

问题3

与以下代码相同：

<input ref={node => {input = node }}

节点的值从何而来，为什么要将其存储到输入变量中？

Answer 1

对问题 1 的回答

AddTodo是一个 React 无状态功能组件 (SFC)。这也是一种功能。在SFC内定义了一个变量input。为了使handleSubmit回调能够利用input，input必须在定义handleSubmit的封闭范围内，或者input作为参数传递给handleSubmit。

因此，以下两个实现实现了所需的行为：

const AddTodo = ({dispatch}) => {
let input
const handleSubmit = e => {
...
}
return (
...
onSubmit={handleSubmit}
...
)

和

const handleSubmit = (e, input) => {
...
}
const AddTodo = ({dispatch}) => {
let input
return (
...
onSubmit={e => handleSubmit(e, input)}
...
)

我强烈建议阅读Kent Dodds的以下博客文章，特别注意类与函数闭包的使用。

类、复杂性和函数式编程

对问题2的回答

来自 react-redux 的connect函数包装了AddTodo组件。调用connect的方式(没有第二个参数，或在此特定情况下没有任何参数)意味着AddTodo将收到一个名为dispatch的 prop

。为了更好地理解 react-redux 及其提供的connect函数的工作原理，请查看文档：

https://github.com/reactjs/react-redux/blob/master/docs/api.md

对问题3的回答

引用内置于 React 中。传递给refprop 的函数将底层 DOM 元素作为参数接收。在这种情况下，传递给refprop 的函数在变量input中存储对 DOM 元素的引用。这允许 DOM 元素稍后通过传递给onSubmit的回调进行访问和改变(即handleSubmit)。有关 refs 的更多详细信息，请参阅 React 文档：

https://reactjs.org/docs/refs-and-the-dom.html