#JavaScriptのクラスとReact
※ 個人用の覚え書きでございます。
###JavaScriptのクラス(継承)
script.js
class Class_1{
constructor(name, age) {
this.name = name;
this.age = age;
}
info() {
console.log(`名前は${this.name}です`);
console.log(`${this.age}歳です`);
}
}
class Class_2 extends Class_1 {
}
const class_2 = new Class_2("山田",20);
class_2.info();
###React(ボタンをクリックすると表示が切り替わる)
app.js
import React from 'react';
class App extends React.Component {
constructor(props) {
super(props);
this.state = {name: '山田'};
}
handleClick(f_name){
this.setState({name: f_name});
}
render() {
return (
<div>
<h1>こんにちは、{this.state.name}さん!</h1>
<button onClick={
() => {this.handleClick('山田')}}>
山田
</button>
<button onClick={
() => {this.handleClick('田中')}}>
田中
</button>
</div>
);
}
}
export default App;