|
Сообщение от Forever_smile
|
|
Используя иерархию и наследования, создать классы окна, окна с заголовком и окна с кнопкой.
|
Как вариант...
<!DOCTYPE html>
<html>
<head>
<style>
.win {
position: relative;
width: 200px;
height: 100px;
margin-bottom: 50px;
border: 1px solid;
}
.win.tit > :first-child {
text-align: center;
color: #ffffff;
background-color: blue;
}
.win.btn > :first-child {
position: absolute;
bottom: 0;
width: 100%;
padding-top: 5px;
padding-bottom: 5px;
text-align: center;
}
</style>
<!-- Загрузка React. -->
<!-- Внимание: во время развертывания, замените "development.js" на "production.min.js". -->
<script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>
<script>
</script>
</head>
<body>
<div id='root'></div>
<script>
'use strict';
const e = React.createElement;
class Window extends React.Component {
render() {
let cls=['win']
if (this.props.addClass) {
cls.push(this.props.addClass)
}
return e(
'div',
{className: cls.join(' ')},
this.props.children,
'Window'
);
}
}
class WinTit extends React.Component {
render() {
let cls='tit'
return e(
Window,
{addClass: cls},
e(
'div',
null,
this.props.titText
)
);
}
}
class WinBtn extends React.Component {
render() {
let cls='btn'
return e(
Window,
{addClass: cls},
e(
'div',
null,
e(
'button',
null,
this.props.btnText
)
)
);
}
}
const container = document.querySelector('#root');
ReactDOM.render(
e(
'div',
null,
e(
Window
),
e(
WinTit,
{titText: 'Заголовок окна'}
),
e(
WinBtn,
{btnText: 'Ok'}
)
),
container
);
</script>
</body>
</html>