在React组件下更改子元素<div>的样式

Question

使用像这样的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>会自动生成一个<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>文件中获取和应用样式？

Answer 1

如果组件自动生成，那么它的道具也可以随之生成，您可以在那里设置样式<div style={this.styleChanger}></div>，然后按照下面的步骤进行操作

创建这样的状态

state = {

  styleChange: true

}

然后执行如下所示的功能。我知道这看起来很丑，但这是给演示的

clicker = () => {

    if (this.state.change) {

      this.setState({

        styleChange: false

      });

      return {

        backgroundColor: "red"

      };

    } else {

      this.setState({

        styleChange: true

      });

      return;

    }

  };

在这里调用函数onClick并将函数设置为样式，它将自动执行

  <ParentComponent>

      <div style={this.styleChanger}>

        <ul>

         <li onClick={this.clicker}>1</li>

         <li>2</li>

         <li>3</li>

       </ul>

      </div>

    </ParentComponent>

Answer 2

会自动为道具生成一个标签： 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>