Question

在我的调用JSX组件中给出以下内容：

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

我希望能够在我的CoolThing课程中使用这些字符串。

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'];

段：

＆＃13;

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'));

＆＃13;

<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>

＆＃13;

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'/>

如何使用＆＃39;数据 - ＆＃39;道具传递到React类？

2 个答案: