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

Question

大家好，

我对 react hooks 比较陌生， 回到我的时代（一年前），当时我正在传递道具组件，然后我会将它们与 "props.something."

一起使用

现在我已经完成了 "todo list" 我可以用另一种方式使用我的道具，通过在参数中引用对象中的道具 :

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

那是什么？为什么我们不再使用 this.props， 为什么参数中的 object？旧方法是否传递道具 dead ？这是因为反应 Hooks ?

为了进一步说明我的例子，两个组件互相交谈。

第一个：

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 }) =>{

}

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

Passing data without props on a functionnal component?

reactjs

react-props

react-hooks