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

时间:2019-10-03 16:35:35

标签: reactjs react-hooks react-props

大家好,

我对反应性钩子相对较新,并且回到我一年前的那段时间,当时我正在传递道具 组件,然后将它们与“ props.something”。

现在我已经完成了一个“待办事项清单”,我可以通过在参数中的对象中引用道具来以其他方式使用道具:

常量表格=({addTodo})=> {    addTodo(x) }

那是什么?为什么我们不再使用 this.props ,为什么不使用 object 参数呢?传递道具的旧方法是 dead 吗?这是因为做出了挂钩吗?

为了进一步说明我的例子,这两个部分互相交谈。

第一个:

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;

如果路过的人能启发我,那就好了

1 个答案:

答案 0 :(得分:4)

什么都没有改变。这只是df2 <- structure(list(Direction = c(146L, 129L, 337L, 130L, 216L, 351L ), Dir180 = c(146L, 129L, 157L, 130L, 36L, 171L), CorrDirection = c(128L, 111L, 319L, 112L, 198L, 333L), Sex = c("Female", "Male", "Female", "Female", "Female", "Male"), Location = c("Low", "Low", "Low", "Low", "Low", "Low")), class = "data.frame", row.names = c("1", "2", "3", "4", "5", "6"))

的快捷方式
destructuring

等同于

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