javascript - Reactjs。无法将变量传递给类

Question

我对 React 完全陌生。我试图将变量“名称”传递给我的类，但它没有被分配。这些名称来自另一个文件。我在按钮上看不到人名。 之前我的卡只是一个简单的功能并且运行良好。但是将其转换为类后，名称不起作用。请帮忙!

之前(工作):

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