Question

我对React完全不熟悉。我试图将变量'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;

Answer 1

首先，我认为你应该改变这段代码：

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

到此：

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

因为你想使用参数的值。

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

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

是多余的，因此您需要将其从当前文件中删除。

最后，当你在另一个组件中使用Card组件时，你应该给它name属性，如：

<Card name="Some String" />

Answer 2

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

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

然后在构造函数中：

constructor(props) { // NOTE that only props gets passed to to constructor
     super(props)
     this.state = { 
        isToggleOn: true,
        name: props.name
};

这样你可以在构造函数中设置状态值，从外部获取变量。

我强烈建议您查看官方教程： https://reactjs.org/docs/introducing-jsx.html

Reactjs。无法将变量传递给类

2 个答案: