我可以在 React.js 中更新和隱藏組件的 props 嗎？

Question

我需要顯示一個淡入或淡出的組件並完全隱藏它，具體取決於屬性值（真或假）。

class Tooltip extends Component {
  constructor(props) {
    super(props);
    this.state = {visible: false};
  }

  componentWillReceiveProps(newProps) {
      if (newProps.status === true) {
      this.setState({visible: newProps.status});
    } else {
      this.setState({visible: false});
    }
} 

  render() {

return (
  <div className={"fade" + ( this.state.visible === true ? ' in' : '' ) + " tooltip tooltip-danger"}>
  <div className="text">{this.props.text}</div>
  </div>
);
    
  }
}

一切正常，組件出現和消失都順利，但沒有從 output 中移除。

而且我需要在順利隱藏后完全移除組件。

我嘗試稍微更改代碼，但在這種情況下，該組件已從 output 中刪除，但淡入和淡出效果消失了......

class Tooltip extends Component {
  constructor(props) {
    super(props);
    this.state = {visible: false};
  }

  componentWillReceiveProps(newProps) {
      if (newProps.status === true) {
      this.setState({visible: newProps.status});
    } else {
      this.setState({visible: false});
    }
} 

  render() {

if (this.state.visible === false) {
    return null;
}

    return (
      <div className={"fade" + ( this.state.visible === true ? ' in' : '' ) + " tooltip tooltip-danger"}>
      <div className="text">{this.props.text}</div>
      </div>
    );
        
      }
    }

請幫我！ 謝謝！

Answer 1

在 React 中有很多方法可以有條件地渲染組件。

我在下面提供了一些內聯條件的示例：

function Component = () => {
    const conditionA = true;
    const conditionB = false;
    return (
        <div>
            {
                // Conditional render based off a truthy condition.
                conditionA && (
                    <div>
                        I will be rendered will conditionA is true.
                    </div>
                )
            }
            {
                // Conditional render based off a truthy condition.
                conditionB && (
                    <div>
                        I will be rendered will conditionB is true.
                    </div>
                )
            }
            {
                // Conditional if / else using a ternary.
                conditionA ?
                    <div>
                        I will be rendered will conditionA is true.
                    </div> :
                    <div>
                        I will be rendered will conditionA is false.
                    </div>
            }
        </div>
    )
}

Answer 2

您可以嘗試使用 &&，例如這種方式 bool && 組件

在你的情況下：

render() {

  return ( 
    {this.state.visible && <div className = "text" > </div>}
  );

}

或類似的東西

Answer 3

在 componentWillReceiveProps() - false 情況下，您可以使用setTimeout() 。

    else{
            timer = setTimeout(() => this.setState({visible: false});, 3000)
}

但是這樣你將需要 state object 中的兩個屬性。 一個用於淡出 class 另一個用於 ^^ 刪除元素（將有超時）。

Answer 4

我將您的問題分為以下幾個階段：

1. 安裝不透明度為 0 的工具提示組件
2. 將不透明度設置為 1
3. 用戶交互后將不透明度設置為 0
4. 卸載工具提示組件

由於您想安裝/卸載組件並同時播放一些 css 轉換，因此您需要在中間有一個組件來監視動畫的階段，然后再卸載工具提示（安裝不是問題）。 我遇到了類似的問題，我的解決方案是使用這個庫： framer-motion

我必須創建這個組件來管理內部組件的 animation state 和安裝 state ：

import { AnimatePresence, motion } from "framer-motion";
import React from "react";

const OpacityAnimation = ({
  className, // optional, in case you need additional classnames
  children,
  duration = 0.3, // duration in seconds
  show // this prop will determine if the component is hidden or shown
}) => (
  <AnimatePresence>
    {show && (
      <motion.div
        style={{ overflow: "hidden", opacity: 0 }} //initial style
        animate={{ opacity: 1 }} // when mounted this style property will be animated
        transition={{ duration }}
        className={className}
        exit={{ opacity: 0 }} // this style will be animated when the component is unmounted
      >
        {children}
      </motion.div>
    )}
  </AnimatePresence>
);

export default OpacityAnimation;

有關如何使用此組件的工作示例，請在此處查看

Answer 5

感謝 UJJAVAL SHAH 關於計時器的提示。 我找到了解決方案。

class Tooltip extends Component {
  constructor(props) {
    super(props);
    this.state = {visible: false, fadein: false};
  }

  componentWillReceiveProps(newProps) {
      if (newProps.status === true) {
      this.timer1 = setTimeout(() => this.setState({fadein: true}), 100);
      this.timer2 = setTimeout(() => this.setState({visible: true}), 50);
    } else {
      this.timer1 = setTimeout(() => this.setState({fadein: false}), 100);
      this.timer2 = setTimeout(() => this.setState({visible: false}), 350);
    }
  } 

  componentWillUnmount() {
  this.timer1 = null;
  this.timer2 = null;
  }  

  render() {

    return (
      <div>
      {this.state.visible && (
      <div className={"fade" + (this.state.fadein ? ' in' : '') + " tooltip tooltip-danger"}>
      <div className="text">{this.props.text}</div>
      </div>
      )}
      </div>
    );

  }
}

這可行，但我不確定這是否是正確的解決方案。 也許吃更多的想法？