我是 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>
谢谢。
据我了解,您可以在 Component2 的 HTML 标记中定义 className 属性。
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> )
}
您是否在 Component2 中添加了一些类/id <Component2 className="my-specific-class" />
来设置它的样式?
(顺便说一句,我希望你的 css 更少/更糟糕,以允许像你一样嵌套样式)
编辑通过添加类名属性。到您的组件 2,我的意思是将其添加到组件 2 渲染方法中,例如
render: function() {
return (
<div id="your-id" className="your-class">
some html here
</div>
);
}