Learning React(3.Reactプロパティの転送)
43702 ワード
1.転送属性
渡す属性を追加または削除するたびに、各構成部品の宣言にコード
01.問題分析
<!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>React!</title>
<!-- 리액트 라이브러리와 리액트가 DOM에 대한 작업할 때 필요한 다양한 기능을 추가 -->
<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<!-- 바벨, 자바스크립트 컴파일러의 참조 -->
<script src="https://unpkg.com/[email protected]/babel.min.js"></script>
<style>
#container {
padding: 50px;
background-color: #EEE;
}
</style>
</head>
<body>
<div id="container"></div>
<script type="text/babel">
var destination = document.querySelector("#container");
class Display extends React.Component {
render() {
return (
<div>
<p>{this.props.color}</p>
<p>{this.props.num}</p>
<p>{this.props.size}</p>
</div>
)
}
}
class Label extends React.Component {
render() {
return (
<Display
color={this.props.color}
num={this.props.num}
size={this.props.size}
/>
)
}
}
class Shirt extends React.Component {
render() {
return (
<div>
<Label
color={this.props.color}
num={this.props.num}
size={this.props.size}
/>
</div>
)
}
}
ReactDOM.render(
<div>
<Shirt color="steelblue" num="3.14" size="medium" />
</div>,
destination
);
</script>
</body>
</html>
02.スプレッドシート演算子（展開演算子）との面会
-1.スプレッドシート演算子の例
<script>
var items = ["1", "2", "3"];
function printArray(a, b, c) {
console.log("print : " + a + " " + b + " " + c);
}
printArray(items[0], items[1], items[2]);
// spread operator
printArray(...items);
</script>
-2.スプレッドシート演算子の使用
<!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>React!</title>
<!-- 리액트 라이브러리와 리액트가 DOM에 대한 작업할 때 필요한 다양한 기능을 추가 -->
<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<!-- 바벨, 자바스크립트 컴파일러의 참조 -->
<script src="https://unpkg.com/[email protected]/babel.min.js"></script>
<style>
#container {
padding: 50px;
background-color: #EEE;
}
</style>
</head>
<body>
<div id="container"></div>
<script type="text/babel">
var destination = document.querySelector("#container");
class Display extends React.Component {
render() {
return (
<div>
<p>{this.props.color}</p>
<p>{this.props.num}</p>
<p>{this.props.size}</p>
</div>
)
}
}
class Label extends React.Component {
render() {
return (
<Display {...this.props} />
)
}
}
class Shirt extends React.Component {
render() {
return (
<div>
<Label {...this.props} />
</div>
)
}
}
ReactDOM.render(
<div>
<Shirt color="steelblue" num="3.14" size="medium" />
</div>,
destination
);
</script>
</body>
</html>
2.JSXと再会
01.JSXプロファイル
-1. JSX
class Card extends React.Component {
render() {
var cardStyle = {
height : 200,
width : 150,
padding : 0,
margin : 10,
display : "inline-block",
backgroundColor : "#FFF",
boxShadow : "0px 0px 5px #666"
};
return (
<div style={cardStyle}>
<Square color={this.props.color} />
<Label color={this.props.color} />
</div>
)
}
}-2. JavaScript
class Card extends React.Component {
render() {
var cardStyle = {
height : 200
, width : 150
, padding : 0
, backgroundColor : "#FFF"
, boxShadow : "0px 0px 5px #666"
};
return React.createElement(
"div"
, { style : cardStyle }
, React.createElement(Square, { color : this.props.color })
, React.createElement(Label, { color : this.props.color })
);
}
}02.重要なJSX特徴
-1.式評価
class Stuff extends React.Component {
render() {
return(
<h1>Boring static content!</h1>
)
}
}
class Stuff extends React.Component {
render() {
return(
<h1>Boring {Math.random() * 100} content!</h1>
)
}
}-2、復讐のアリマン・トリトン
1.類似配列を使用する構文
class Stuff extends React.Component {
render() {
return(
[
<p key="1">I am</p>,
<p key="2">returning a list</p>,
<p key="3">of thing!</p>
]
)
}
}2.計画（Fragments）
class Stuff extends React.Component {
render() {
return(
<React.Fragment>
<p key="1">I am</p>,
<p key="2">returning a list</p>,
<p key="3">of thing!</p>
</React.Fragment>
)
}
}class Stuff extends React.Component {
render() {
return(
<>
<p key="1">I am</p>,
<p key="2">returning a list</p>,
<p key="3">of thing!</p>
</>
)
}
}-3.インラインCSSは使用できません
class Card extends React.Component {
render() {
var cardStyle = {
height : 200,
width : 150,
padding : 0,
margin : 10,
display : "inline-block",
backgroundColor : "#FFF",
boxShadow : "0px 0px 5px #666"
};
return (
<div style={cardStyle}>
<Square color={this.props.color} />
<Label color={this.props.color} />
</div>
)
}
}-4.コメント
class Stuff extends React.Component {
render() {
return(
<div>
{/* 자식으로서의 주석*/}
</div>
)
}
}-5.大文字と小文字の区別
class Stuff extends React.Component {
render() {
return(
<div>
<p>HTML TAG</p>
</div>
)
}
}class Stuff extends React.Component {
render() {
return(
<div>
<Letter/>
</div>
)
}
}03.随所に見られるJSX
これまでJSXコードはrenderまたはreturn関数のみであったが,
var swatchComponent = <Swatch color="#2F004F"></Swatch>
ReactDOM.render(
<div>
{swatchComponent}
</div>
, document.querySelector("#container")
)Reference
この問題について(Learning React(3.Reactプロパティの転送)), 我々は、より多くの情報をここで見つけました https://velog.io/@ansalstmd/Learning-React3.-React-속성-전달テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol