如何使用 'data-' 传递给 React class 的道具？

Question

鉴于我调用的 JSX 组件中的以下内容：

<CoolThing data-itemx="Corduroy" data-itemy="Pancakes" />

我希望能够在我的 CoolThing class.

中使用这些字符串

class CoolThing extends Component {
  getStyle() {
    var itemx = this.props.data-itemx;
    var itemy = this.props.data-itemy;

这会生成 NaN 而不是数据字符串。我尝试了一些其他的东西：

    this.props.dataItemx    // undefined
    this.props.dataitemx    // undefined
    this.props.itemx        // undefined
    this.props.data.itemx   // error accessing itemx of undefined

运行 console.log(this.props) 显示 data-itemx 存在，但我无法访问它。

我已经读过 https://facebook.github.io/react/docs/dom-elements.html 但仍然不清楚如何进行这项工作。

那么你是怎么做到的？

Answer 1

使用 brackets 表示法访问它，点表示法不适用于 -

class CoolThing extends Component {
  getStyle() {
    var itemx = this.props['data-itemx'];
    var itemy = this.props['data-itemy'];

片段：

class CoolThing extends React.Component {
  render() {
    console.log(this.props['data-itemx']);
    return (
      <div>Hello World</div>
    )
  }
}
ReactDOM.render(<CoolThing data-itemx="4324"/>, 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>

Answer 2

Props 是一个对象，你通过键传递道具中的值：data-itemx, data-itemy

因此，这些值将以完全相同的名称提供，并使用方括号 [] 访问这些值。像这样：

class CoolThing extends Component {
   getStyle() {
      var itemx = this.props['data-itemx'];
      var itemy = this.props['data-itemy'];
      console.log(itemx, itemy);
      ....

建议：我建议你不要在属性名中使用-，使用dataItemx和dataItemy 而不是 data-itemx, data-itemy.

检查这个片段：

var App = (props) => {
   console.log(props['a-b'])
   return <p>Hello</p>
}

ReactDOM.render(<App a-b='a'/>, 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'/>

如何使用 'data-' 传递给 React class 的道具？

How to use 'data-' props passed into a React class?

javascript

reactjs

react-jsx