主页 / 问题 / 1042464
Accepted
manking
Asked:2020-11-05 15:35:05 +0800 CST2020-11-05 15:35:05 +0800 CST

如何设置数据属性？

  • 772

这就是我在jsx中设置的方式，但是没有设置属性。

  <div
            data-id={item.id}
            dataId={item.id}
          >

项目使用15.4.1版本，没办法更新。

reactjs

3 个回答

  1. Best Answer

    在旧版本的 React (<16) 中添加日期属性的第一种方法

    类组件中的componentDidMount生命周期内部

    componentDidMount: function() {
  const el = ReactDOM.findDOMNode(this.refs.test);
  el.setAttribute('test-attribute', 'test value');
}

    第二种方法适用于任何地方，并且更容易应用。代码沙盒 v15.4.1.

    function App() {
  const testAttr = {'data-attr': 'value'}
  return (
    <div className="App">
      <h1  {...testAttr }>zazu</h1>
    </div>
  );
}
    • 3

  2. React 支持data-属性：

    React 支持所有 data-* 和 aria-* 属性以及以下列表中的每个属性。手动的

    版本 15 中的示例：

    class App extends React.Component {
  render() {
    return (
      <div data-hello="hello">
        <h1 aria-hidden={true}>Hello, world1</h1>
      </div>
    );
  }
}

ReactDOM.render(<App />, document.getElementById('root'));
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.0.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/15.0.0/react-dom.min.js"></script>
<div id="root"></div>

    版本 15 中添加的属性

    • 3

  3. 显然你不能将数字数据类型放入属性中，因为我有

      <span className={isBuying ? '' : 'active'} data-action="sell" onClick={changeAction}>

    data-action="sell" -- 有效

    • 0

相关问题