(TIL7) React.js基礎概念state,props

15837 ワード
State Props はんのうきそ React テキストリンク
今日は、リアクターでデータを渡すJavaScriptオブジェクトを整理します!
Reactには、stateとpropsの2つの代表的なJavaScriptオブジェクトがあります.
🌟 state,props構造図

1.stateとは


state=>は、構成部品内で値を宣言および変更できます.

下図に示すように、stateは各構成部品にのみ値をロードまたは変更できます.

✔state用法


stateに書き込まれるデフォルトコードは次のとおりです.
(babelを設定するとより簡潔に使用できます)
class A extends React.Component{
        constructor(props){
                super(props)
                this.state = {
                    name: 'jihyun',
                    age: 27
                }
            }
        render(){
            return;
      }
}
ここではstateに書かれた情報を利用して自己紹介をしましょう
        render(){
            return(
                <>
                    Hi my name is {this.state.name}<br />
                    I'm {this.state.age} years old
                </>

            )
        }
renderのコードを次のように変更します.
stateから保存したデータを{this.state.変数名}形式でロードできます.
JavaScript式は括弧にしか含まれないので、括弧で囲まなければなりません!

💻 結果



✔babel stateの使い方


babelでは、より短いコードを使用してステータスオブジェクトにデータを保存できます.

    class A extends React.Component{
        state = {
            name: 'jihyun',
            age:27
        }
        render(){
            return;
        }
    
    }

⚙babel設定法


1)バーベルスクリプトコードをヘッダ部に入れる
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
2)bodyに次のスクリプトラベルを作成する
<script type="text/babel">
</script>

💻 結果


結果は以下の通り!

完全なコード(ラベルを使用)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>state&props</title>
    <link rel="stylesheet" href="./example6.css">
    <script crossorigin src="https://unpkg.com/react@17/umd/react.development.js"></script>
    <script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
    <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
</head>
<body>
    
    <div id="root"></div>
    <script type="text/babel">

    class A extends React.Component{
        state = {
            name: 'jihyun',
            age:27
        }
        render(){
            return(
                <>
                    Hi my name is {this.state.name}<br />
                    I'm {this.state.age} years old
                </>

            )
        }
    
    }
    ReactDOM.render(
        <A />,
        document.querySelector('#root')
    )
    </script>
</body>
</html>

2.道具とは


props=>親構成部品で変数名を指定する値は、子構成部品では変更できません.

ここで、親要素はA、子要素はB、Dを表す.
A素子にstateとして格納されたデータ値を変数に入れてB素子に送信してもよいし、A素子から取得した値をB素子からpropsにロードして使用してもよい.修正不可能!

✔道具の使い方


Bという要素をもう1つ作成し、A要素の情報をB要素として変数に送信します.
class A extends React.Component{
        state = {
            name: 'jihyun',
            age:27
        }

        render(){
            return(
                <B name={this.state.name} age={this.state.age}/>
            )
        }
    }
A素子にB素子を装填場合、
<B />
B構成部品をインポートしながらA構成部品の情報をB構成部品に送信する場合は、次のことをメモしてください.
<B 변수명={this.state.state안의 보낼 데이터}/>
B素子の値は以下の通りである.
    class B extends React.Component{
        state = {
            sname:'semin',
            sage:30
        }

        render(){
            return(
                <>
                    Hi my name is {this.state.sname}<br />
                    I'm {this.state.sage} years old<br />
                    <br />
                    Oh, Hi my name is {this.props.name}<br />
                    I'm {this.props.age} years old<br />
                </>

            )
        }

    }

💻 結果


結果は次のとおりです.

3.再度、最も重要な違いについて言及した。


state(関数で宣言された変数など)は、構成部品で管理されます.
props(関数パラメータなど)は構成部品に渡されます.
**こんにちは!😊 私は公費支援で開発の勉強を始めた学生です!
もし私が提供した情報に間違いがあったら、メッセージを残してください.💚
私の文章を読んでくれてありがとう.🙇‍♀️**
組み込み関数
標準11399:ATM|Python