Question

在React中，何时在道具中使用功能？

例如，在下面的代码中，有时您不使用prop中的函数，但是有时候你会这么做。

deallocating

您在这里使用（）=> import React, { useState } from 'react'; const IterationSample = () => { const input = React.createRef(); const [names, setNames] = useState( [ { id: 1, text: 'John' }, { id: 2, text: 'Jake' }, { id: 3, text: 'JJ' }, { id: 4, text: 'Jesus' } ]) const [inputText, setInputText] = useState(''); const [nextId, setNextId] = useState(5); const onChange = e => setInputText(e.target.value); const onRemove = id => { const nextNames = names.filter(name => name.id !== id); setNames(nextNames); } const namesList = names.map(name => <li key={name.id} onDoubleClick={() => onRemove(name.id)}>{name.text}</li>); const onClick = () => { const nextNames = names.concat({ id: nextId, text: inputText }); setNextId(nextId + 1); setNames(nextNames); setInputText(''); input.current.focus(); } const onEnter = (e) => { if (e.key === 'Enter') { onClick(); } } return ( <> <input ref={input} value={inputText} onChange={onChange} onKeyPress={onEnter} /> <button onClick={onClick} >Add</button> <ul>{namesList}</ul> </> ); }; export default IterationSample;中的函数但是不在onDoubleClick={() => onRemove(name.id)或onKeyPress={onEnter}

中

那么什么时候在props中使用函数？

Answer 1

您的所有三个示例都使用一个函数：

onDoubleClick={() => onRemove(name.id)}
onKeyPress={onEnter}
onChange={onChange}

唯一的区别是，其中一个需要为函数（onRemove）指定一个参数，而其他两个则不需要。

如果属性所传递的参数（在本例中为onKeyPress和onChange）正是函数需要的参数，则只需按原样引用函数即可。但是，如果您需要自定义要传递给函数的内容（在本例中为onRemove），则可以将其包装在新函数中以包含该自定义。

Answer 2

当需要传递额外的参数（event本身除外）时，基本上可以使用它。例如如果您想通过id，您可以这样做：

onClick={(e) => onRemove(name.id)}
//or together with the event
onClick={(e) => onRemove(e, name.id)}

否则，当您不需要在函数内部传递参数时，或者只需要传递event时，就可以这样写：

onClick={onRemove}

Answer 3

此

onClick={onClick}

等同于

onClick={(e) => onClick(e)}

在第一种情况下，您将函数本身作为道具传递。

对于第二种情况，您定义了一个内联函数，该内联函数使用参数onClick调用(e)函数。

通常，您只可以将函数本身作为道具传递，除非您想在调用函数时添加其他参数。例如，

onClick={(e) => onClick(e, name.id)}

Answer 4

：）

David和Ertan的回答确实很好而且很完整。我将再添加两件事。

首先，考虑reactjs的良好实践和性能，不要在渲染中使用箭头功能。

根据陪同规则eslint rules：

A bind call or arrow function in a JSX prop will create a brand new function on every single render. This is bad for performance, as it may cause unnecessary re-renders if a brand new function is passed as a prop to a component that uses reference equality check on the prop to determine if it should update.

第二，如果您需要自定义要传递给函数的内容（在这种情况下为on Remove），则可以使用lodash的替代方法：partial

official doc

以下是您的代码的一个示例：

const namesList = names.map(name =>
             <li key={name.id}
                 onDoubleClick={ _.partial(this.onRemove, name.id)}
             >
                 {name.text}
             </li>
           );

祝你有美好的一天

Answer 5

只需澄清一下，因为您似乎并没有获得想要的对初学者友好的答案：

诸如“ onKeyPress”或“ onChange”之类的事件带有隐式事件。这意味着什么？这意味着，无论您绑定到该组件的哪个函数，都将由“事件”触发，并且该事件将成为您提供的任何函数的参数。实际上，如果您查看这些函数本身，就会注意到他们接受一个参数“ e”表示事件。因此，如果有帮助，您可以认为其中一些命令是

onKeyPress = {（）=> onEnter（keyPressEvent）}

这些事件中将包含一些有用的数据，但是通常我们唯一关心的是诸如用户按下了哪个键，或者（如果发生更改）输入的新内容是什么

对于onDoubleClick之类的东西，您要为其提供一些额外的数据。您可以使用javascript做一些花哨的步法，以识别双击的内容及其属性是什么，但这是一个麻烦，增加了不必要的代码，并且容易混淆您打算编写的内容。因此，只需提供所需的函数，最终会更容易。

反应何时在道具中使用功能？

5 个答案: