换孩子 <div> React组件下的样式

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>将自动为props： maincontent生成一个<div>标签。 所以最终的渲染结果是……

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

我在</ParentComponent>内部定义了一种测试样式

单击列表项时，我试图更改<div> CSS样式。 如何在<ParentComponent>文件中获取div dom并对其应用样式？

谢谢！

Answer 1

我不确定是否能得到您想要的东西，但是...不建议您使用React访问DOM元素。 如果要更改div的样式，请改用一个事件，例如每个元素的onClick，并且该事件必须更改div的当前样式。

Answer 2

如果组件自动生成，则其道具也可以生成，您可以在其中将样式设置为<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 3

会自动为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>

Answer 4

如果您无法控制上级组件，建议您按照以下步骤操作

---

• 使用状态来定义何时需要应用样式
• 用自己的类将所有内容包装在div中
• 当状态改变时，然后添加一个自定义类
• 为您的自定义类添加规则

---

.component-wrapper--单击> div {...}

---

<div className={`component-wrapper component-wrapper--${this.state.isClicked ? 'clicked': ''}`}>
  <ParentComponent
    mainContent={
      <ul>
        <li onClick={() => this.setState({isClicked: true})}>1</li>

      </ul>
    }
  />;
</div>

Answer 5

尝试dangerouslySetInnerHTML地使用dangerouslySetInnerHTML 。 在您的情况下，请创建以下内容：

const createMainContent = () => {
    return {
        __html: '<ul>
            <li>1</li>
            <li>2</li>
            <li>3</li>
        </ul>'
    };

然后将其传递给您的<div /> ：

<div dangerouslySetInnerHTML={createMainContent()} />