React超入門。propsとstateの動きを理解するコード
こちら6年前の記事です(現在2020/4/30)。今ならもうちょっと説明できるので興味ある方はこちらをご覧ください。
【Reactのstateとpropsの違いが知りたい！(変更・更新の仕方等DEMOあり)】過去のReact初心者の自分にpropsとstateの違いを説明する
以降は当時の記事
GWにReactを完全に理解して、目標を掲げ２日目ですが、
React。
まだ仲良くなれない。。
どうも参考文献が難しい。。簡単に教えて欲しいなあという思いがありました。
とくに肝のpropsとstate
どの文献も同じ事言っているからもうちょっと違う角度で教えて欲しいなあと
一応おライリーのReactの本とか、
ここに書いてあるReact入門だったり、本家英語のチュートリアルだったり調べて、写経してのですが、
どうも難しいなあと、
役割はわかったし、理屈は分かるんだけど、やっぱちょっと難しいことやってない？？って思っちゃって、
一番わかりやすい動きする部品はないものかとおもっていました。
で、
これが一番わかりやすかったので共有です。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>react0502</title>
<!-- // <script src="build/react.js"></script>
// <script src="build/JSXTransformer.js"></script>
-->
</head>
<body>
<div id="content"></div>
<script src="src/js/react.js"></script>
<script src="src/js/app.js"></script>
</body>
</html>
htmlは共通です。
props
var Hello = React.createClass({
render(){
return (
<div>Hello!{this.props.name}</div>
);
}
});
React.render(
<Hello name="moritakenji" />,document.getElementById('content')
)
propsを渡す
var Hello = React.createClass({
render(){
return (
<div>myMovieTime!{this.props.fafa}</div>
);
}
});
var sub = [{title:'reon',time:'120'}];
React.render(
<Hello fafa={sub[0].time} />,document.getElementById('content')
)
stateとsetState
ルール
- render()内では値を直接代入してはいけない。
- 変える際はsetState()内で変える
var Hello = React.createClass({
getInitialState(){
return{
name:'morita'
};
},
onClick(){
this.setState({
name:this.state.name + '!'
});
},
render(){
return (
<div>
<h1>Hello!{this.state.name}</h1>
<button onClick={this.onClick}>click</button>
</div>
);
}
});
React.render(
<Hello name="moritakenji" />,document.getElementById('content')
)
setPropsでコンポーネントのオブジェクトとして
var Hello = React.createClass({
render(){
return (
<div>myMovieTime!{this.props.title}</div>
);
}
});
var re = React.render(
<Hello />,document.getElementById('content')
)
re.setProps({title:'reon',time:'120'});
Author And Source
この問題について(React超入門。propsとstateの動きを理解するコード), 我々は、より多くの情報をここで見つけました https://qiita.com/M-ISO/items/6c8b97a9447ccfe9a1f6著者帰属：元の著者の情報は、元のURLに含まれています。著作権は原作者に属する。
Content is automatically searched and collected through network algorithms . If there is a violation . Please contact us . We will adjust (correct author information ,or delete content ) as soon as possible .