如何将“isVisibility”值作为道具传递给另一个组件（React）

Question

我想将 isVisibile 值传递给组件“Livechat.js”，以便我可以根据 isVisibile 的值动态编辑那里的一些信息。

isVisibile 逻辑所在的文件 - NewsLetter.js

const NewsLetter = () => {

const newsLetterRef = useRef();
const [isVisible , setIsVisible] = useState()
useEffect( () => {
    const observer = new IntersectionObserver( (entries) => {
        const entry = entries[0];
        setIsVisible(entry.isIntersecting)
    })
    observer.observe(newsLetterRef.current)
} , [])

  return (
    <>
        <NewsLetterWrapper>
            <div ref={newsLetterRef} className={styles.newsLetterCenter}>
                <div className={styles.newsLetterContainer}>
                    <div>
                      <p className={styles.newsLetterTitle}>Subscribe To Our <br /> <span> Newsletter For 10% - 50% OFF </span>   </p>    
                      <p className={styles.newsLetterDesc}>Stay up to date with our latest offers and  promotions by signing up now! <br /> Be the first to know of our 10% - 50% discounts.</p>                    
                    </div>

                    <div className={styles.newsLetterInputContent}> 
                    <div>
                        <input className={styles.newsLetterInput} type="text" placeholder='Enter email' />
                    </div>
                        <PrimaryButton>
                            Submit
                        </PrimaryButton>
                    </div>
                </div>
            </div>
        </NewsLetterWrapper>
    </>
  )
}

export default NewsLetter

我想在哪里使用道具 - Live.js

const Livechat = (props) => {
  return (
    <>
        <div className={styles.whatsappFloat}>
            <div className={styles.chatText}>
                <p>Chat With Us Now</p>
            </div>
            <a href='https://api.whatsapp.com/send?phone=000000000' >
                <img src={LivechatImg} alt= "/" />
            </a>    
        </div>
    </>
  )
}

我在一页上使用两个组件的地方 - Homepage.js

const HomePage = () => {
  return (
    <>
     <Livechat />
     <NewsLetter /> 
    </>

我想要做的基本上是从 NewsLetter 获取 isVisibile 值并将其作为道具传递给 Livechat 组件。 知道我应该如何实现这一目标吗？ 任何帮助将不胜感激，提前谢谢你。

Answer 1

我建议将isVisible移动到 HomePage 中，这样您就可以将它传递给两个组件。 然后，您可以通过传递 function onIsVisibleChange()来更新isVisible 。

const HomePage = () => {

  const [isVisible , setIsVisible] = useState()

  return (
    <>
     <Livechat onIsVisibleChange={setIsVisible}/>
     <NewsLetter isVisible={isVisible}/> 
    </>
}

您可以在 NewsLetter 中更新它：

const NewsLetter = (props) => {

  const {onIsVisibleChange} = props;

  const newsLetterRef = useRef();

  useEffect( () => {
    const observer = new IntersectionObserver( (entries) => {
        const entry = entries[0];
        onIsVisibleChange(entry.isIntersecting);
    })
    observer.observe(newsLetterRef.current)
  } , [])

  ...

}

同样，在 Livechat 中，您可以像这样使用变量：

const Livechat = (props) => {

  const {isVisible} = props;

  return (
    <>
        <div className={styles.whatsappFloat}>
            {isVisible && 
              <div className={styles.chatText}>
                <p>Chat With Us Now</p>
              </div>
            }
            <a href='https://api.whatsapp.com/send?phone=000000000' >
                <img src={LivechatImg} alt= "/" />
            </a>    
        </div>
    </>
  )
}