如何避免render方法中的绑定或内联箭头功能

首先： 一个简单的解决方案是为map函数内部的内容创建一个组件并将值作为prop传递，当您从子组件中调用函数时，可以将值传递给props传递的函数。

Parent

deleteTodo = (val) => {    console.log(val)}todos.map(el =>     <MyComponent val={el} onClick={this.deleteTodo}/>)

MyComponent

class MyComponent extends React.Component {    deleteTodo = () => {        this.props.onClick(this.props.val);    }    render() {       return <div  onClick={this.deleteTodo}> {this.props.val} </div>    }}

样本片段

class Parent extends React.Component {     _deleteTodo = (val) => {        console.log(val)    }    render() {        var todos = ['a', 'b', 'c'];        return (<div>{todos.map(el =>  <MyComponent key={el} val={el} onClick={this._deleteTodo}/>)}</div>        )    }}class MyComponent extends React.Component {        _deleteTodo = () => {          console.log('here');   this.props.onClick(this.props.val);        }        render() {return <div onClick={this._deleteTodo}> {this.props.val} </div>        }    }ReactDOM.render(<Parent/>, document.getElementById('app'));<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script><div id="app"></div>

编辑：

第二： 另一种方法是使用备忘录并返回一个函数

constructor() {    super();    this._deleteTodoListener = _.memoize(        this._deleteTodo, (element) => {  return element.hashCode();         }   )}_deleteTodo = (element) => {   //delete handling here}

并像这样使用

todos.map(el => <div key={el} onClick={this._deleteTodoListener(el)}> {el} </div>)

PS但是，这不是最佳解决方案，仍然会导致创建多个功能，但与初始情况相比仍是一个改进。

第三： 不过，更合适的解决方案是

attribute

event

_deleteTodo = (e) => {     console.log(e.currentTarget.getAttribute('data-value')); } todos.map(el => <div key={el} data-value={el} onClick={this._deleteTodo}> {el} </div>)

但是，在这种情况下，使用toString方法将属性转换为字符串，因此and对象将被转换为

[ObjectObject]

["1" ,"2", "3"]

"1, 2, 3"