React 添加变量名属性

Question

React 中添加变量名称属性最简洁的方法是什么？我想要的最终结果是：<div data-flag>Hello</div>名称data-flag存储在const变量中。

---

我现在找到的方法有：

const DATA_FLAG = 'data-flag';

const Hello = ({ name }) => {
    const dataAttrs = { [DATA_FLAG]: true }
    return <div {...dataAttrs}>Hello {name}</div>;
}

或者这个单行版本（但我发现它的可读性较差）：

const Hello = ({ name }) => <div {...{ [DATA_FLAG]: true }}>Hello {name}</div>;

你可以在这个 JSFiddle中玩它

---

如果属性是可变的（真或假），这些版本可以正常工作，但就我而言，它总是如此，true所以我发现它有点过头了，而且语法很复杂。

我很想知道是否有更干净的方法来实现它。

我知道最好的方法是直接应用它，例如：<div data-flag>Hello</div>但我确实需要存储data-flag在常量中（与其他组件共享）。

Answer 1

您可以在不使用 JSX 语法的情况下创建 React 元素。像这样的东西应该有效：

const DATA_FLAG = 'data-flag'

const Hello = ({ name }) => {
    const dataAttrs = { [DATA_FLAG]: true }
  return React.createElement('div', dataAttrs, `Hello ${name}`)
}

不过，这只会让您传递属性的方式看起来更容易。不要以为你会绕过dataAttrs为你的 props 定义一个对象。