按钮功能未从 React 中的另一个文件调用

Question

我需要调用 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;

如果这是不可能的，请建议我一种可能的方法。

Answer 1

我建议您简化组件的结构，而不是进行大量修改。

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>
}

列出代码中不好的地方。

1. 将组件实例保持在状态中。很难管理。即使你的简单案例也证明了这一点。
2. 将 toggleIsTruncated 函数保留在 Read 组件内。我认为我们应该将其保留在外部，并仅将 2 个属性传递给 Read 组件。我只启用公开的两件事，

const { text, isTruncated } = props

如您所见，它很容易维护，并允许我们做任何我们想做的事情。

附言。如果我的评论和示例有帮助，请竖起大拇指。