reactjs - 如何添加一串数据属性来 react ？

Question

如何以简单的方式将一串数据属性插入到 React 渲染函数中？

  render() {
    let data_attr_str=' data-test="1" data-test-2="2"';

    return (
      <div className="grid" {data_attr_str}>
        WHY YOU NOT WORKING? 
      </div>
    );
  }

Answer 1

JSX 不是模板引擎，因此您不能仅连接该字符串。我认为你应该检查https://reactjs.org/docs/jsx-in-depth.html了解更多详情。

但是您可以使用传播属性:https://reactjs.org/docs/jsx-in-depth.html#spread-attributes .

render() {
  let dataAttrs = {
    'data-test': '1',
    'data-test-2': '2'
  };

  return (
    <div className="grid" {...dataAttrs}>
      NOW IT WORKS
    </div>
  );
}