Javascript 尝试在组件之间传递数据时未定义

首先，我是新手。我有两个组件

TagUtils

和

url

。我正在尝试将路由器参数从

url

传递到

TagUtils

。这是我的密码：

url.jsx

// some codes....
export default class Urls extends React.Component {

render() {
 return (
   <div>
        <TagUtils  tag={this.props.params.tag_id}/>
   </div>
)
}
}

//有些代码。。。。
导出默认类URL扩展React.Component{
render（）{
返回(
)
}
}

TagUtils.jsx

export default class TagUtils extends React.Component {

    deleteTag(props) {
        console.log(props.tag);
    }

    render() {
        return (
            <div className="col-xs-6 col-md-4">
                <button type="button" className="btn btn-danger" onClick={this.deleteTag}><i className="fa fa-trash"> Delete</i></button>
            </div>
        )
    }
}

导出默认类TagUtils扩展React.Component{
删除标签（道具）{
console.log（props.tag）；
}
render（）{
返回(
删除
)
}
}

---

当我单击Delete按钮时，它只是显示

未定义的

。可能我遗漏了什么。

在您的示例中

道具

是

事件

对象，其中没有

标记

属性-这就是为什么您得到

未定义的

。，您需要为

deleteTag

设置

this

，然后您可以通过

this.props

内部

deleteTag

方法获取组件

props

export default class TagUtils extends React.Component {
  constructor() {
     this.deleteTag = this.deleteTag.bind(this);
  } 

  deleteTag() {
    console.log(this.props.tag);
  }

  render() {
    return (
      <div className="col-xs-6 col-md-4">
        <button type="button" className="btn btn-danger" onClick={this.deleteTag}>
          <i className="fa fa-trash"> Delete</i>
        </button>
      </div>
    )
  }
}

导出默认类TagUtils扩展React.Component{
构造函数（）{
this.deleteTag=this.deleteTag.bind（this）；
} 
deleteTag（）{
console.log（this.props.tag）；
}
render（）{
返回(
删除
)
}
}

在您的示例中，

道具

是

事件

对象，其中没有

标记

属性-这就是您得到

未定义

的原因。，您需要为

deleteTag

设置

this

，然后您可以通过

this.props

内部

deleteTag

方法获取组件

props

export default class TagUtils extends React.Component {
  constructor() {
     this.deleteTag = this.deleteTag.bind(this);
  } 

  deleteTag() {
    console.log(this.props.tag);
  }

  render() {
    return (
      <div className="col-xs-6 col-md-4">
        <button type="button" className="btn btn-danger" onClick={this.deleteTag}>
          <i className="fa fa-trash"> Delete</i>
        </button>
      </div>
    )
  }
}

导出默认类TagUtils扩展React.Component{
构造函数（）{
this.deleteTag=this.deleteTag.bind（this）；
} 
deleteTag（）{
console.log（this.props.tag）；
}
render（）{
返回(
删除
)
}
}

随着React从createClass转移到

ES6类

我们需要自己将

此

的正确值处理到我们的方法中，如下所述： 更改代码，使方法绑定到构造函数中的正确值：

export default class TagUtils extends React.Component {
  constructor(props) {
      super(props);
      this.deleteTag = this.deleteTag.bind(this);
  }

  deleteTag(props) {
    console.log(props.tag);
  }

  render() {
    return (
        <div className="col-xs-6 col-md-4">
            <button type="button" className="btn btn-danger" onClick={this.deleteTag}><i className="fa fa-trash"> Delete</i></button>
        </div>
    )
  }
}

---

随着React从createClass转移到

ES6类

，我们需要自己将

此

的正确值处理到我们的方法中，如下所述： 更改代码，使方法绑定到构造函数中的正确值：

export default class TagUtils extends React.Component {
  constructor(props) {
      super(props);
      this.deleteTag = this.deleteTag.bind(this);
  }

  deleteTag(props) {
    console.log(props.tag);
  }

  render() {
    return (
        <div className="col-xs-6 col-md-4">
            <button type="button" className="btn btn-danger" onClick={this.deleteTag}><i className="fa fa-trash"> Delete</i></button>
        </div>
    )
  }
}

---

如果登录，您能在控制台中看到这个.props.params.tag_id吗？您应该使用this.props.tag_id，并且您需要在某个地方设置tag_id，我们可以看到该代码吗？React es6 classe docs:如果您登录，您可以在控制台中看到this.props.params.tag_id吗？您应该使用this.props.tag_id，并且您需要在某处设置tag_id，我们可以看到该代码吗？React es6 classe docs: