Как создать один компонент реакции внутри другого?

Question

Я новичок в css, и я не могу понять, как позиционировать один компонент внутри другого в React. Я могу показать их отдельно, но когда я помещаю один в другой. Я не вижу этого внутри. Я думаю, что проблема в CSS файле

#homePage{ 
    section{ 
     h1{ 
     text-align: left; //this is shown 
     } 
     //here I want to add the other React component but I don't know how 

    } 
} 

и метод визуализации:

<div id="homePage"> 
    <Component1> 
    <section> 
    <h1>Hi</h1> 
    <Component2> 
    </Component2> 
    </section> 
    </Component1> 
</div> 

Спасибо.

Answer 1

Из того, что я понимаю, вы могли бы иметь атрибут Classname, определенный внутри вашего HTML-теги COMPONENT2 в.

class Component2 extends Component{ 

render(){ 

    return(
     <section className="component2styles"> 
      This is Component2 
     </section > 
    ); 
} } 

Теперь вы можете изменить ур таблицы стилей, как

#homePage{ 
    section{ 
     h1{ 
     text-align: left; //this is shown 
     } 
     //components2 style will be nested here 

    section.component2styles{ 
     border:1px solid blue; 
    } 

    } 
} 

Или в качестве альтернативы вы можете попробовать инлайн-стили, кажется, набирает много тяги в React развития.

render(){ 
var styleobj={color:'red'}; 
return(<section style={styleobj} > This is Component 2 </section>) 
} 

Answer 2

Вы добавили некоторый класс/id в свой Component2, например <Component2 className="my-specific-class" />, чтобы его стиль?

(кстати, я надеюсь, что ваш CSS меньше/дерзость один, чтобы вложенные стили, как вы делали)

EDIT Добавляя Classname Attr. к вашему COMPONENT2, я имею в виду, добавив его в COMPONENT2 визуализации метод как

render: function() { 
    return (
     <div id="your-id" className="your-class"> 
      some html here 
     </div> 
    ); 
}