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

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

Answer 2

如果组件自动生成，则其道具也可以生成，您可以在其中将样式设置为find . -type f -name "ABC*.csv" -o -name "XYZ*.csv" | xargs head -n 1 | tr ',' '\n' | sort | uniq，然后按照下面的步骤进行操作

创建这样的状态

<div style={this.styleChanger}></div>

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

state = {
  styleChange: true
}

此处调用函数onClick并将函数设置为样式，它将自动执行

clicker = () => {
    if (this.state.change) {
      this.setState({
        styleChange: false
      });
      return {
        backgroundColor: "red"
      };
    } else {
      this.setState({
        styleChange: true
      });

      return;
    }
  };

Answer 3

它将自动为道具生成一个标签：maincontent

只有在ParentComponent内有div周围时才会发生这种情况

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

如果是这种情况，则应使用React.Fragment

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

OR

<>
    {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。在您的情况下，请创建以下内容：

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

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

<div dangerouslySetInnerHTML={createMainContent()} />

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

5 个答案: