Javascript Reactjs。无法将变量传递给类

我完全没有反应能力。我试图将一个变量“name”传递给我的类，但它没有被赋值。这些名称来自另一个文件。我的按钮上看不到人的名字。 以前，我的卡只是一个简单的功能，运行良好。但在将其转换为类之后，name就不起作用了。请帮忙

工作前：

const Card = ({name, email}) => {

return  (

        <div>
            <h2 className='f5'>{name}</h2>
            <p className='f6'>{email}</p>
        </div>

    </div>
);
}

class Card extends Component { 
    constructor({props, name}) {
        super(props);
        this.state = { 
            isToggleOn: true,
            name: this.name
        };

        this.handleClick = this.handleClick.bind(this);
 }

handleClick() {
    this.setState(prevState => ({
        isToggleOn: !prevState.isToggleOn
    }));
} 
render() {
    var { name } = this.state;
    return (
        <button onClick={this.handleClick}>
            { this.state.isToggleOn ? name : 'OFF' }
        </button>
    );  
    }
} 

ReactDOM.render(
  <Card />,
  document.getElementById('root')
);
export default Card;

const-Card=（{name，email}）=>{
返回(
{name}
{email}
);
}

之后（不工作）：

const Card = ({name, email}) => {

return  (

        <div>
            <h2 className='f5'>{name}</h2>
            <p className='f6'>{email}</p>
        </div>

    </div>
);
}

class Card extends Component { 
    constructor({props, name}) {
        super(props);
        this.state = { 
            isToggleOn: true,
            name: this.name
        };

        this.handleClick = this.handleClick.bind(this);
 }

handleClick() {
    this.setState(prevState => ({
        isToggleOn: !prevState.isToggleOn
    }));
} 
render() {
    var { name } = this.state;
    return (
        <button onClick={this.handleClick}>
            { this.state.isToggleOn ? name : 'OFF' }
        </button>
    );  
    }
} 

ReactDOM.render(
  <Card />,
  document.getElementById('root')
);
export default Card;

类卡扩展组件{
构造函数（{props，name}）{
超级（道具）；
this.state={
是的，
姓名：this.name
};
this.handleClick=this.handleClick.bind（this）；
}
handleClick（）{
this.setState（prevState=>({
isToggleOn:！prevState.isToggleOn
}));
} 
render（）{
var{name}=this.state；
返回(
{this.state.istogleon？名称：'OFF'}
);  
}
} 
ReactDOM.render(
,
document.getElementById（'root'））
);
导出默认卡；

变量名应通过特殊参数props传递。 来自组件外部的所有变量都通过道具传递

ReactDOM.render(
  <Card name="Some name"/>,
  document.getElementById('root')
);

通过这种方式，您可以在构造函数中设置状态值，从外部获取变量

我强烈建议您查看官方教程：

---

首先，我认为您应该更改这段代码：

this.state = { 
    isToggleOn: true,
    name: this.name
};

ReactDOM.render(
  <Card />,
  document.getElementById('root')
);

为此：

this.state = {
    isToggleOn: true,
    name:       name || ''
};

因为您想要使用参数的值

其次，我不认为这是一个根组件，所以很可能您应该在其他组件中使用它，这意味着这段代码：

this.state = { 
    isToggleOn: true,
    name: this.name
};

ReactDOM.render(
  <Card />,
  document.getElementById('root')
);

---

名称来自哪个文件？@AkshayAggarwal另一个文件：从“React”导入React；从“./卡”导入卡；const CardList=（{users}）=>{return（{users.map（（user，i）=>{return}）}）；}导出默认CardList；现在我得到：意外使用'name'无限制全局您的示例使用了未定义的

name

变量。更新了示例@TedKhiI am GENT:意外使用'name'无限制全局它现在可以工作了！我忘了在构造函数中传递名称。Ty=）