「React入門」props のデフォルト値を利用するサンプル

2021年2月17日2021年2月18日

書式
関数名.defaultProps = {
name: 'xxx '
};
defaultProps というプロパティを割り当てることで、props に値が渡されなかった際のデフォルト値を定義する
使用例

<!DOCTYPE html>

<html>

<head>

<title>React sample</title>

</head>

<body>

class TestFunc extends React.Component {

render() {

return (

<h1>guest welcome, {this.props.name}</h1>

);

}

<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>React sample</title> <script src="/react/16.4.0/umd/react.development.js"></script> <script src="/react-dom/16.4.0/umd/react-dom.development.js"></script> <script src="/babel-standalone/6.26.0/babel.min.js"></script> </head> <body> <div id="cft"></div> <script type="text/babel"> class TestFunc extends React.Component { render() { return ( <h1>guest welcome, {this.props.name}</h1> ); } }

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>React sample</title>
<script src="/react/16.4.0/umd/react.development.js"></script>
<script src="/react-dom/16.4.0/umd/react-dom.development.js"></script>
<script src="/babel-standalone/6.26.0/babel.min.js"></script>
</head>
<body>

<div id="cft"></div>
<script type="text/babel">
class TestFunc extends React.Component {
  render() {
    return (
      <h1>guest welcome, {this.props.name}</h1>
    );
  }
}

結果
guest welcome, study skill in arkgame

React.js

Posted by arkgame

関連投稿: