从标准HTML迁移时，单击React.js

我试图将一个侧栏导航组件移动到React.js，onclick中的javascript不再工作。因此，侧边栏显示，但单击时什么也没有发生

编辑：这是适用于HTML的代码：

<div id="sidebar">
        <div class="toggle-btn" onclick="document.getElementById('sidebar').classList.toggle('active');">
            <span></span>
            <span></span>
            <span></span>
        </div>
        <ul>
            <a href="index.html" class="animsition-link">
                <li>Home</li>
            </a>

            <a href="about.html" class="animsition-link">
                <li>About</li>
            </a>

            <a href="resume.html" class="animsition-link">
                <li>Resume</li>
            </a>

            <a href="projects.html" class="animsition-link">
                <li>Projects</li>
            </a>
        </ul>

    </div>

编辑：React Snippit（显示渲染的React代码的一部分）

import React，{Component}来自'React'；
类头扩展组件{
render（）{
如果（此.props.data）{
var name=this.props.data.name；
var占领=this.props.data.occulation；
var description=this.props.data.description；
var city=this.props.data.address.city；
var networks=this.props.data.social.map（函数（网络）{
return

})
}
返回(

您传递的是字符串而不是JavaScript，并且使用了错误的关键字。请确保使用了特定于react的术语

onClick={}

和

className=“”

编辑：看起来您试图错误地使用ref。您根本不需要在此处使用ref，因为在react类中可以使用onChange函数。但是，如果没有所有代码，很难确切地说出您要做什么

第二次编辑： 好的，通过你更新的代码，我可以看到更多的错误。这里有一些问题，我将尝试涵盖所有问题

不使用react关键字。像

onclick

和

class

这样的东西需要更改为react特定的

onclick

和

className

才能工作

您没有正确使用REF。从最基本的意义上讲，REF用于在安装react组件后修改该组件。我假设您正在尝试在此处调用函数，在这种情况下，由于我看不到此处定义的函数，我只能假设它是作为道具传入的。如果这是真的，则需要使用

this.props.blah

所有对变量的赋值都在if语句的范围内，因此它们在该范围外不可用。如果需要在代码中使用它们，则必须在if块之前定义变量

---

谢谢你的帮助。我将其更改为onChange，它会给我错误。导航栏与上面显示的正常html代码完美配合。我只需要帮助翻译它以反应和激活另一个文件中的css基本上需要将切换btn切换为活动，以便激活css代码和侧栏扩展我被关联g该代码位于react类的render方法中。如果不是，在react中工作之前，您需要做更多的工作。您最好发布整个代码，或者如果您是react新手，请运行一些教程，以便在尝试转换某些内容之前了解其工作原理。网站位于react中它的功能很好。侧边栏显示在标题中，所有内容的格式都很好。只是当它被单击时，它并不像我在普通html网站中使用相同的侧边栏代码时那样处于活动状态。我相信唯一需要更改的是OnClick部分（你说应该是onChange）编辑：React snippit of CodeRender（）方法中的代码是HTML，而不是JSX，您需要更改它。例如，将class更改为className，等等。此外，您需要将其更改为

this.refs.state.active

，而不是

onChange={this.handlechange}

并编写一个

handlechange（）

方法。

handle change（）

基本上包含在HTML onclick函数中使用的事件处理代码。最后，您需要在标头构造函数中注册事件处理程序。提供了有关如何执行此操作的清晰示例。

import React, { Component } from 'react';

class Header extends Component {
render() {

if(this.props.data){
  var name = this.props.data.name;
  var occupation= this.props.data.occupation;
  var description= this.props.data.description;
  var city= this.props.data.address.city;
  var networks= this.props.data.social.map(function(network){
    return <li key={network.name}><a href={network.url}><i className={network.className}></i></a></li>
  })
}

return (
  <header id="home">




  <nav id="nav-wrap">
  <div id="sidebar" ref="sidebar">
    <div class="toggle-btn" onChange={this.refs.state.active}>
      <span></span>
      <span></span>
      <span></span>
    </div>
    <ul>
      <a href="index.html" class="animsition-link">
        <li>Home</li>
      </a>

      <a href="about.html" class="animsition-link">
        <li>About</li>
      </a>

      <a href="resume.html" class="animsition-link">
        <li>Resume</li>
      </a>

      <a href="projects.html" class="animsition-link">
        <li>Projects</li>
      </a>
    </ul>

  </div>