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

您是否在组件2中添加了一些类/ ID，例如<Component2 className="my-specific-class" />来设置样式？

（顺便说一下，我希望你的css比你更喜欢嵌套样式）

修改通过添加className attr。到你的Component2，我的意思是在Component2渲染方法中添加它，如

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

Answer 2

据我所知，您可以在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> ) 
}

如何在另一个内部设置一个反应组件？

2 个答案: