等效于 toggleClass/addClass/removeClass

Question

我正在学习 React 并且正在尝试实现一些我以前使用 jQuery 能够轻松完成的事情。 不过，我想纯粹在 React 中做到这一点，并找到了一个解决方案，可以让我参与其中，但并不完全......

基本上我有一个包含文本的 div。 默认情况下，我有一个 class 设置该元素的高度，然后我有另一个 class 删除高度限制，允许所有内容可见。

在 jQuery 中，删除限制高度 class 并添加我的非限制高度将是简单的一两行。

到目前为止，这是我的 React 代码：

import React, { Component } from 'react'
import arrow from "./img/down-arrow.png";


class UserGen extends Component {

    constructor(props) {
        super(props);
        this.state = {
          active: false
        }
    }
      
    handleClick() {
        this.setState({
          active: !this.state.active
        })
    }

    render() {
        return (
        <div className="user-generated col-md-8 offset-md-2 col-sm-12">   
            <div onClick={this.handleClick.bind(this)} className= {this.state.active ? " user-generated-inner ug-expanded" : " user-generated-inner ug-collapsed"}>
                <h4>User Generated Summary</h4>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum tempus auctor magna in fermentum. Sed et arcu vitae sem elementum consequat. Sed rhoncus vestibulum risus, eu tempor diam faucibus a. In efficitur accumsan scelerisque. Ut convallis nulla nec eros consectetur, ut consectetur tellus accumsan. Aenean quam tortor, consequat quis ligula quis, posuere laoreet risus. Nam id cursus ligula, et sagittis libero. Nam id dui vel diam eleifend accumsan. Donec aliquet, enim vitae dapibus maximus, turpis ante cursus enim, iaculis mollis nibh quam lacinia magna. Curabitur metus lorem, posuere blandit tortor eget, molestie viverra purus. Mauris in justo eget velit suscipit convallis. Aliquam placerat mi nec erat venenatis tincidunt vel vitae ligula. Nulla mattis justo id lacus posuere, in fringilla ex commodo. Ut at sem ligula.</p>
                <p>Duis eu diam ut urna egestas interdum. Integer sapien ligula, ultricies ac lobortis id, accumsan quis nisl. Donec pharetra condimentum mattis. Aliquam pretium lacinia ultricies. Maecenas vehicula nisi velit, dignissim consectetur nulla molestie ut. Suspendisse dictum porta semper. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras condimentum rhoncus volutpat. Fusce placerat, metus id finibus maximus, augue tellus hendrerit lacus, quis maximus magna erat et nisl. Aenean non leo metus. Suspendisse potenti. Maecenas sit amet lobortis nunc, ut vehicula tortor. Duis maximus est vel tortor vulputate dignissim. Integer ac laoreet risus, et ultricies mi.</p>
                <p>Mauris est lorem, lobortis id accumsan faucibus, aliquet in ante. In porttitor nisl sit amet risus feugiat maximus. Mauris commodo dignissim fringilla. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce sodales, nunc et dictum placerat, mi lacus placerat enim, nec faucibus sapien enim vel felis. Fusce ultricies condimentum mauris, eget accumsan risus dictum id. Mauris tincidunt, ipsum at suscipit faucibus, tortor ligula volutpat ante, a cursus sapien lacus non sem. Maecenas consectetur, felis et scelerisque laoreet, turpis turpis gravida turpis, eget vestibulum magna tellus et ex. Mauris dignissim lorem non dui ornare ullamcorper. Mauris interdum bibendum augue. Proin egestas laoreet sapien nec sodales.</p>  
            </div> 
            <div className="expand"><p>Read More<span className="expand-arrow"><img src={arrow} alt="arrow for the read more" /></span></p></div>
    
        </div> 
        );

        
    } 

  }



export default UserGen

这有效......但我只能弄清楚如何让它运行，如果它是包含我点击的内容的 div。

理想情况下，我希望能够从我的“扩展”class 中触发相同的 onClick function。

非常感谢任何帮助，以及有关此代码外观的任何建设性反馈。

Answer 1

一般来说，你的代码看起来不错，你就快到了。 您只需将我重命名为toggleActive的相同handleClick方法添加到div.expanded作为其onClick 。 这也将触发相同的操作。

import React, { Component } from "react";
import arrow from "./img/down-arrow.png";

class UserGen extends Component {
  constructor(props) {
    super(props);
    this.state = {
      active: false,
    };
  }

  toggleActive = () => {
    this.setState({
      active: !this.state.active,
    });
  };

  render() {
    const { active } = this.state;
    const containerClass = `user-generated-inner ug-${
      active ? "expanded" : "collapsed"
    }`;

    return (
      <div className="user-generated col-md-8 offset-md-2 col-sm-12">
        <div onClick={this.toggleActive} className={containerClass}>
          <h4>User Generated Summary</h4>
          <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum
            tempus auctor magna in fermentum. Sed et arcu vitae sem elementum
            consequat. Sed rhoncus vestibulum risus, eu tempor diam faucibus a.
            In efficitur accumsan scelerisque. Ut convallis nulla nec eros
            consectetur, ut consectetur tellus accumsan. Aenean quam tortor,
            consequat quis ligula quis, posuere laoreet risus. Nam id cursus
            ligula, et sagittis libero. Nam id dui vel diam eleifend accumsan.
            Donec aliquet, enim vitae dapibus maximus, turpis ante cursus enim,
            iaculis mollis nibh quam lacinia magna. Curabitur metus lorem,
            posuere blandit tortor eget, molestie viverra purus. Mauris in justo
            eget velit suscipit convallis. Aliquam placerat mi nec erat
            venenatis tincidunt vel vitae ligula. Nulla mattis justo id lacus
            posuere, in fringilla ex commodo. Ut at sem ligula.
          </p>
          <p>
            Duis eu diam ut urna egestas interdum. Integer sapien ligula,
            ultricies ac lobortis id, accumsan quis nisl. Donec pharetra
            condimentum mattis. Aliquam pretium lacinia ultricies. Maecenas
            vehicula nisi velit, dignissim consectetur nulla molestie ut.
            Suspendisse dictum porta semper. Lorem ipsum dolor sit amet,
            consectetur adipiscing elit. Cras condimentum rhoncus volutpat.
            Fusce placerat, metus id finibus maximus, augue tellus hendrerit
            lacus, quis maximus magna erat et nisl. Aenean non leo metus.
            Suspendisse potenti. Maecenas sit amet lobortis nunc, ut vehicula
            tortor. Duis maximus est vel tortor vulputate dignissim. Integer ac
            laoreet risus, et ultricies mi.
          </p>
          <p>
            Mauris est lorem, lobortis id accumsan faucibus, aliquet in ante. In
            porttitor nisl sit amet risus feugiat maximus. Mauris commodo
            dignissim fringilla. Lorem ipsum dolor sit amet, consectetur
            adipiscing elit. Fusce sodales, nunc et dictum placerat, mi lacus
            placerat enim, nec faucibus sapien enim vel felis. Fusce ultricies
            condimentum mauris, eget accumsan risus dictum id. Mauris tincidunt,
            ipsum at suscipit faucibus, tortor ligula volutpat ante, a cursus
            sapien lacus non sem. Maecenas consectetur, felis et scelerisque
            laoreet, turpis turpis gravida turpis, eget vestibulum magna tellus
            et ex. Mauris dignissim lorem non dui ornare ullamcorper. Mauris
            interdum bibendum augue. Proin egestas laoreet sapien nec sodales.
          </p>
        </div>
        <div className="expand" onClick={this.toggleActive}>
          <p>
            Read More
            <span className="expand-arrow">
              <img src={arrow} alt="arrow for the read more" />
            </span>
          </p>
        </div>
      </div>
    );
  }
}

export default UserGen;

如果您只想在div.expanded上展开而不是折叠，您需要创建一个新的 function ，仅将 state 中的active设置为true 。

expand = () => {
  this.setState({ active: true });
}

希望这可以帮助！

编辑：试图在评论部分回答问题。

（需要在这里，因为文本太长了。）

我不确定我是否理解了这个问题。 但是，我将尝试回答：您的组件UserGen有一个内部 state 在这种情况下仅包含 boolean active 。 现在，在您的渲染方法中，您正在根据 state 的 boolean active的当前值执行特定操作。 渲染方法不关心 state 更改来自何处，它只需要 state 并按照您的要求执行。

为了在另一个层面上证明这一点，您甚至可以将您的组件setState方法添加到window object 并从您的开发工具中更改 state，而无需单击页面上的任何元素。 该组件仍然会根据当前的 state 简单地呈现您告诉它的任何内容。

// (...)
constructor(props) {
  super(props);
  this.state = {
    active: false,
  };

  // Do this only for demonstration purposes, do not ship this
  window.__userGenSetState = this.setState;
}

现在在您的开发工具中只需调用__userGenSetState({ active: true })或__userGenSetState({ active: false }) ，您会看到渲染方法并不关心 state 更改的来源。

Answer 2

我认为您可以使用 React Ref's 来实现您想要做的事情。这是有关如何实现它们的官方文档。

https://tr.reactjs.org/docs/forwarding-refs.html