按鈕功能不從React中的另一個檔案呼叫-有解無憂

我需要呼叫CutomerDashboard.js檔案的“ toggleIsTrucated ”函式和“ isTruncated ”到CustomerNotice.js檔案按鈕 onClick 和文本更改位置，我該如何呼叫它？

（在這個客戶儀表板檔案中，我正在創建一個讀取函式來顯示一定程度的通知文本）

import React, {useState,useEffect} from 'react';
import { Input, Row, Col, Button } from 'antd';
import {fetchDashboardMetrics} from "./DashboardApi";
import {items} from "./DashboardItems";
import axios from 'axios';
import CustomerNotice from "./CustomerNotice";

function Read ({children}) {

    const text = children;

    const [isTruncated, setIsTrucated] = useState(true); 

    const result = isTruncated ? text.slice(0,90) : text;

    function toggleIsTrucated(){
        setIsTrucated(!isTruncated);
     }

    return (
        <div>
            {result}....
        </div>
        
    );

}


const CustomerDashboard = () => {

    const [features, setFeatures] = useState(items);
    const source = axios.CancelToken.source()
    const [notice, setNotice] = useState(<Read>Customer Notice: Optimism Is Invaluable For The Meaningful Life. With A Firm Belief In A Positive Future You Can Throw Yourself Into The Service Of That Which Is Larger Than You Are.  -Martin Seligman-</Read>);
    const [noticeVisibility, setNoticeVisibility] = useState(true);
    
    useEffect(() => {
        fetchDashboardMetrics(features, setFeatures,source.token)
        return (() => {
            source.cancel();
        })
    }, []);

    return (
        <>
            <div className='md:pl-8 sm:pl-0'>
                <div className='my-5 '>
                    <p className='mb-8'>My Account - Dashboard Overview</p>
                    {noticeVisibility && <CustomerNotice notice={notice} setNoticeVisibility={setNoticeVisibility}/>}
                </div>
                <ul role="list" className="grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-3">
                    {features.map((feature) => (
                        <li key={feature.name} className="col-span-1 bg-white rounded-lg shadow divide-y divide-gray-200 relative">
                            <div className="w-full flex items-center justify-between p-6 space-x-6">
                                <div className="flex-1 truncate">
                                    <div className="flex items-center space-x-3 justify-between">
                                        <h3 className="text-gray-900 text-lg truncate">{feature.name}</h3>
                                        {feature.isNew && (
                                            <div className="absolute -top-2 -right-2 p-1 px-4 text-white text-sm bg-red-500">
                                                New
                                            </div>
                                        )}
                                    </div>
                                </div>
                            </div>
                            <div>
                                <div className={'mx-4 mt-2 mb-3 '}>
                                    {feature.details.map((singleDetail) => {
                                        return (
                                            <div className={'flex justify-between text-base'}>
                                                <span>{singleDetail.name}</span>
                                                <span>{singleDetail.value}</span>
                                            </div>
                                        )
                                    })}
                                </div>
                            </div>
                        </li>
                    ))}
                </ul>
            </div>
        </>
    )
}
export default CustomerDashboard;



import React, {useState,useEffect} from 'react';
import {XIcon} from "@heroicons/react/solid";

const CustomerNotice = ({notice, setNoticeVisibility}) => {
    return (
        <div>
            <div className="mt-8 pb-2 sm:pb-5">
                <div className="max-w-7xl mx-auto px-2 sm:px-6 lg:px-8">
                    <div className="p-2 rounded-lg bg-orange-600 shadow-lg sm:p-3">
                        <div className="flex items-center justify-between flex-wrap">
                            <div className="w-0 flex-1 flex items-center">
                                <p className="ml-3 font-medium text-white truncate">
                                    <span className="md:inline">{notice}</span>
                                </p>
                            </div>
                            <div className="order-3 mt-2 flex-shrink-0 w-full sm:order-2 sm:mt-0 sm:w-auto">
                                <a
                                    href="#"
                                className="flex items-center justify-center px-4 py-2 border border-transparent rounded-md shadow-sm text-sm font-medium text-orange-600 bg-white hover:bg-orange-50"
                                >
                                    <button onClick={toggleIsTrucated}>{isTruncated ? "Read More" : "Read Less"}</button>
                                </a>
                            </div>
                            <div className="order-2 flex-shrink-0 sm:order-3 sm:ml-2">
                                <button
                                    onClick={() => setNoticeVisibility(false)}
                                    type="button"
                                    className="-mr-1 flex p-2 rounded-md hover:bg-orange-500 focus:outline-none focus:ring-2 focus:ring-white"
                                >
                                    <span className="sr-only">Dismiss</span>
                                    <XIcon className="h-6 w-6 text-white" aria-hidden="true"/>
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    );
};

export default CustomerNotice;

如果這是不可能的，請建議我一種可能的方法。

uj5u.com熱心網友回復：

我建議您簡化組件的結構，而不是做一堆黑客攻擊。

import { useState } from 'react'

export default function CustomerDashboard() {
  // I am not sure why you want to keep notice in state,
  // because in your example you did not call setNotice
  const [notice, setNotice] = useState(`
    Customer Notice: Optimism Is Invaluable For The Meaningful Life.
    With A Firm Belief In A Positive Future You Can Throw Yourself Into The Service
    Of That Which Is Larger Than You Are. -Martin Seligman
  `)
  const [isNoticeVisible, setIsNoticeVisible] = useState(true)

  return (
    <div>
      <h1>My Account - Dashboard Overview</h1>

      {isNoticeVisible && (
        <CustomerNotice
          notice={notice}
          setIsNoticeVisible={setIsNoticeVisible}
        />
      )}
    </div>
  )
}

function CustomerNotice(props) {
  const { notice, setIsNoticeVisible } = props
  const [isTruncated, setIsTruncated] = useState(true)

  function toggleIsTruncated() {
    setIsTruncated(!isTruncated)
  }

  return (
    <div>
      <Read text={notice} isTruncated={isTruncated} />

      <button onClick={toggleIsTruncated}>
        {isTruncated ? 'Read More' : 'Read Less'}
      </button>

      <button onClick={() => setIsNoticeVisible(false)}>Dismiss</button>
    </div>
  )
}

function Read(props) {
  const { text, isTruncated } = props
  const result = isTruncated ? text.slice(0, 90) : text

  return <div>{result}....</div>
}

代碼中的壞處的串列。

保持組件實體處于狀態。很難管理。即使是您的簡單案例也證明了這一點。
toggleIsTruncated將功能保留在Read組件內部。我認為我們應該把它放在外面，只向Read組件傳遞 2 個道具。我只啟用暴露了兩件事

const { text, isTruncated } = props

如您所見，它易于維護并允許我們為所欲為。

PS。如果我的評論和示例有幫助，請豎起大拇指。

uj5u.com熱心網友回復：

您可以使用將組件useImperativeHandle內的方法或值暴露Read給外部。

更新您的Read組件以公開您需要的方法和值。并使用 forwardedref來系結它們。

const Read = forwardRef(({ children }, ref) => {
  const text = children;

  const [isTruncated, setIsTrucated] = useState(true);

  useImperativeHandle(
    ref,
    () => ({
      toggleIsTrucated: () => {
        setIsTrucated((prev) => !prev);
      },
      isTruncated: isTruncated
    }),
    [isTruncated]
  );

  const result = isTruncated ? text.slice(0, 90) : text;

  return <div>{result}....</div>;
});

CustomerDashboard使用創建一個新的 refuseRef并將其作為引數ref傳遞給Read您創建的組件。

 const readRef = useRef(null);
  const [notice, setNotice] = useState(
    <Read ref={readRef}>
      Customer Notice: Optimism Is Invaluable For The Meaningful Life. With A
      Firm Belief In A Positive Future You Can Throw Yourself Into The Service
      Of That Which Is Larger Than You Are. -Martin Seligman-
    </Read>
  );

在CustomerDashboardNow中，您可以將readReftoCustomerNotice作為道具傳遞。

           <CustomerNotice
              ...
              ...
              readRef={readRef}
            />

現在在CustomerNotice組件中，readRef已將current值分配給公開的函式和值。進行空值檢查并使用它們。

const CustomerNotice = ({
  ...
  ...
  readRef
}) => {
  return (
      ...
      ...
                 <button
                    onClick={() =>
                      readRef.current && readRef.current.toggleIsTrucated()
                    }
                  >
                    {readRef.current && readRef.current.isTruncated
                      ? "Read More"
                      : "Read Less"}
                  </button>
    ...
    ...
   )
}

按鈕功能不從 React 中的另一個檔案呼叫

轉載請註明出處，本文鏈接：https://www.uj5u.com/net/435662.html

標籤：javascript 反应功能

上一篇：函式（x）如何在R中作業？

下一篇：資料框中多列的T檢驗