时间戳

首页 > 解决方案 > 换孩子

React 组件下的样式

javascript - 换孩子
React 组件下的样式

问题描述

像这样使用 React 组件

const teststyle={color:red}
class Test extends React.Component {
  render() {
        <ParentComponent 
          mainContent={
           <ul>
            <li>1</li>
            <li>2</li>
            <li>3</li>
           </ul>}
         >
         </ParentComponent>
   }
}

会<ParentComponent>自动为 props 生成一个<div>标签：maincontent。所以最终的渲染结果就像

    <ParentComponent>
      <div class="testtest">
        <ul>
         <li>1</li>
         <li>2</li>
         <li>3</li>
       </ul>
      </div>
    </ParentComponent>

图片我在里面定义了一个测试样式</ParentComponent>

我正在尝试更改<div>单击列表项的 CSS 样式。如何div dom在<ParentComponent>文件中获取并应用样式？

谢谢！

标签： javascriptreactjs

解决方案

会自动为 props 生成标签：maincontent

这只会发生在里面ParentComponent有一个div像

<div>
    {this.props.children}
</div>

如果这是你的情况，你应该使用React.Fragment

<Fragment>
    {this.props.children}
</Fragment>

或者

<>
    {this.props.children}
</>

因此，只需更改ParentComponent为使用 Fragment 并添加您自己的具有您想要的样式的 div 元素。

<ParentComponent>
  <div style={this.styleChanger}>
    <ul>
     <li onClick={this.clicker}>1</li>
     <li>2</li>
     <li>3</li>
   </ul>
  </div>
</ParentComponent>

推荐阅读