在功能组件上传递没有道具的数据?

Question

大家好，

我对反应钩子相对较新，回到我的时代(一年前(，当我通过道具时 组件，然后我会将它们与"props.something"一起使用。

现在我已经做了一个"待办事项列表"，我可以以另一种方式使用我的道具，通过在参数中的对象中引用道具：

const Form = ({ addTodo }( => { 添加待办事项(x( }

什么？为什么我们不再使用 this.props，为什么参数中的对象？旧方式传道具死了吗？这是因为反应钩子吗？

为了更多地说明我在这里的示例，这两个组件相互通信。

第一个：

import React, {useState} from 'react';
import Form from './Form';

const Affichage = () => {
const [todos, setTodos] = useState([
'1',
'2',
'3',
'4'
])
const addTodo = text => {
const newTodos = [...todos, text];
setTodos(newTodos)
}
return (
<div>
<Form addTodo={addTodo} />
<ul>
{todos.map((item, index) =>{
return(
<li key={index}>
{item}
</li>
)
})}
</ul>
</div>
)
}
export default Affichage;`

第二个：

import React, {useState} from 'react';

const Form = ({ addTodo }) => {
const [value, setValue] = useState('');
const handleSubmit = e => {
e.preventDefault();
// console.log(value);
addTodo(value);
}

return(
<form onSubmit={handleSubmit}>
<input type="text" onChange={e => setValue(e.target.value)}/>
<button>Envoyer</button>
</form>
)
}
export default Form;

如果有人路过可以启发我，那就太棒了 ☺

Answer 1

没有任何变化。这只是destructuring的捷径

const Component = props =>{
const { foo } = props
}

相当于

const Component = ({ foo }) =>{
}