有没有办法将自定义对象属性分配给元素？答案

【问题标题】：Is there a way to assign a custom object property to an element?有没有办法将自定义对象属性分配给元素？
【发布时间】：2017-12-30 12:09:54
【问题描述】：

我正在使用 react 16.0。

我想将自定义对象属性分配给一个元素并获取它的值。

如下。 (https://jsfiddle.net/69z2wepo/96660/) 当然不行。

class Test extends React.PureComponent {
    render () {
        let numbers = { number:1, number2:2, number3:3 };
        return <div numbers={numbers} onClick={(event) => console.log(event.target.numbers.number)}>Test</div>;
    }
}

ReactDOM.render(
  <Test/>, document.querySelector('body')
);

我想知道有没有好的方法。谢谢。

【问题讨论】：

你可以使用data-*属性并传入一个字符串。但你为什么要这样做？为什么不创建一个组件并传递道具？这就是 react 的工作方式
如果您这样做的目的是避免在渲染中绑定，那么您可以看看这个stackoverflow.com/questions/45053622/…
DOM 旅行很昂贵，更不用说你打破了 react 的模式，你可以用它的diffing and Reconciliation algorithm 打断它。使用虚拟 DOM 是有充分理由的 :)
这很有帮助。谢谢各位
使用 toString 方法将对象或数组转换为字符串，导致 [object object] 被传递给对象，因此直接将它们传递给 div 意味着，您需要对其进行字符串化并传递它，这是一个开销，请检查链接的答案以获取解决方案

标签： javascript reactjs dom element

【解决方案1】：

如果您只想在 onClick 处理程序中访问该值，那么您可以使用操作处理程序本身 bind 该值

const handler = (numbers, e) => {
    console.log(numbers)
}
render () {
    let numbers = { number:1, number2:2, number3:3 };
    return <div onClick={this.handler.bind(this, numbers)}>Test</div>;
}

【讨论】：

在 render 方法中使用 .bind() 或箭头函数不是一个好的解决方案，因为它在每次调用 render 方法时都会创建一个新函数。有很多关于避免这种做法的讨论。请检查这个问题stackoverflow.com/questions/45053622/…