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

Question

大家好，

\n\n

我对反应钩子还比较陌生，回到我的时代（一年前），当我通过组件传递道具时，我会将它们与“props.something”一起使用。

\n\n

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

\n\n

const Form = ({ addTodo }) => {\n addTodo(x)\n}

\n\n

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

\n\n

为了更多地说明我在这里的例子，两个组件互相交谈。

\n\n

第一个 ：

\n\n

import React, {useState} from \'react\';\nimport Form from \'./Form\';\n\n\nconst Affichage = () => {\n\n    const [todos, setTodos] = useState([\n        \'1\',\n        \'2\',\n        \'3\',\n        \'4\'\n    ])\n\n    const addTodo = text => {\n        const newTodos = [...todos, text];\n        setTodos(newTodos)\n    }\n\n    return (\n        <div>\n            <Form addTodo={addTodo} />\n            <ul>\n                {todos.map((item, index) =>{\n                    return(\n                        <li key={index}>\n                            {item}\n                        </li>\n                    )\n                })}\n            </ul>\n        </div>\n    )\n\n}\n\nexport default Affichage;`\n

\n\n

第二个 ：

\n\n

import React, {useState} from \'react\';\n\n\nconst Form = ({ addTodo }) => {\n\n    const [value, setValue] = useState(\'\');\n\n    const handleSubmit = e => {\n        e.preventDefault();\n        // console.log(value);\n        addTodo(value);\n\n    }\n\n\n    return(\n        <form onSubmit={handleSubmit}>\n\n            <input type="text" onChange={e => setValue(e.target.value)}/>\n            <button>Envoyer</button>\n\n        </form>\n    )\n\n}\n\nexport default Form;\n

\n\n

如果路过的人可以启发我那就太棒了 \xe2\x98\xba

\n

Answer 1

没有改变。这只是一个捷径destructuring

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

相当于

const Component = ({ foo }) =>{

}