День 54  — «Реакция» — «Комплексные компоненты»

Сегодня я узнал о создании сложных компонентов. Сложный компонент — это просто объединение компонентов вместе.

Я узнал, как вы можете объединить несколько компонентов в один div под переменной, чтобы вы могли отображать один компонент в DOM. В приведенном ниже примере я поместил все компоненты в div внутри переменной ColorSpectrum, чтобы затем отобразить это в DOM внизу кода. Раньше мне приходилось рендерить все цвета по отдельности.

var ColorSpectrum = function() {
return(
<div>
<Red/>
<Orange/>
<Yellow/>
<Green/>
<Blue/>
<Indigo/>
<Violet/>
</div>
)
}
var Red = function() {
var redStyle = {
height: 50,
width: 150,
backgroundColor: "red",
}
return(
<h1 style={redStyle}>Red</h1>
);
}
var Orange = function() {
var orangeStyle = {
height: 50,
width: 150,
backgroundColor: "orange",
}
return(
<h1 style={orangeStyle}>Orange</h1>
);
}
var Yellow = function() {
var yellowStyle = {
height: 50,
width: 150,
backgroundColor: "yellow",
}
return(
<h1 style={yellowStyle}>Yellow</h1>
);
}
var Green = function() {
var greenStyle = {
height: 50,
width: 150,
backgroundColor: "green",
}
return(
<h1 style={greenStyle}>Green</h1>
);
}
var Blue = function() {
var blueStyle = {
height: 50,
width: 150,
backgroundColor: "blue",
}
return(
<h1 style={blueStyle}>Blue</h1>
);
}
var Indigo = function(){
var indigoStyle = {
height: 50,
width: 150,
backgroundColor: "indigo",
}
return(
<h1 style= {indigoStyle}>Indigo</h1>
);
}
var Violet = function(){
var violetStyle = {
height: 50,
width: 150,
backgroundColor: "violet",
}
return(
<h1 style={violetStyle}>Violet</h1>
);
}
ReactDOM.render(
<ColorSpectrum/>
,
document.getElementById("app")
);

Затем я научился делать это с компонентами класса почти таким же образом. Класс Shapes обновляется компонентами <Circle/>, <Square/> и <Rectangle/> в div, а затем класс Shapes отображается в DOM вместо каждого отдельного компонента.

class Shapes extends React.Component {
render() {
return(
<div ><Circle/>
<Square/> 
<Rectangle/>
</div>
);
}
}
class Circle extends React.Component {
render() {
var circleStyle = {
width: 100,
height: 100,
background: "red",
borderRadius: "50%",
}
return(
<h1 style={circleStyle}>Circle</h1>
);
}
}
class Square extends React.Component {
render() {
var squareStyle = {
width: 100,
height: 100,
background: "red",
}
return(
<h1 style={squareStyle}>Square</h1>
);
}
}
class Rectangle extends React.Component {
render() {
var rectangleStyle = {
width: 200,
height: 100,
background: "red",
}
return(
<h1 style={rectangleStyle}>Rectangle</h1>
);
}
}
ReactDOM.render(
<Shapes/>,
document.getElementById("app")
);