मैं अपने alert() को अधिक उपयोगकर्ता के अनुकूल बनाना चाहता हूं। मेरे पास 3 घटक हैं जो अलर्ट ट्रिगर होने से पहले एक साथ फिट होते हैं।

मेरे पास एक फॉर्म (ड्रॉपडाउन और इनपुट) है जो सबमिट करने पर निम्नलिखित फ़ंक्शन को सक्रिय करता है:

// src/components/input.js
<Btn onClick={() => getData(this.state.dropdown, this.state.value)}>Generate</Btn>

getData() निम्नलिखित फ़ंक्शन है जो एक अलग फ़ाइल में है ../utils/debugger

// src/utils/debugger
async function getData(filter, captureName) {
  if (captureName === '') {
    alert(<Alert color='red' type='warning' message='this is an error' />);
  } else {
    axios({
      method: 'GET',
      url: `http://xxx/debugger/${filter}/${captureName}/logs`,
    })
      .then((res) => {
        if (res.data.length === 0) {
          alert(<Alert color='red' type='warning' message='this is an error' />);
        } else {
          alert(<Alert color='green' type='success' message='this is an error' />);
          console.log(res.data);
          data = res.data;
        }

        return res.data;
      })
      .catch((err) => {
        console.log(err);
      });
  }
}

लेकिन मैं अपने <Alert /> घटकों को निम्न फ़ाइल में प्रस्तुत करने के लिए उपरोक्त चेतावनियों का उपयोग करना चाहूंगा:

// src/App.js
ReactDOM.render(
  <React.StrictMode>
    <script src='http://localhost:8097'></script>
    <div className='flex flex-col min-h-screen'>
      <header>
        <nav className='bg-gray-800'>
          <div className='mx-auto px-8'>
            <div className='flex items-center justify-between h-20'>
              <div>
                <span className='text-white font-bold'>Easy Debugger UI</span>
              </div>

              <div className=''>
                <Input /> // ../src/components/input.js
              </div>
            </div>
          </div>
        </nav>
      </header>

      <div className='container mx-auto'>
        <div className='my-2'>
          <Alert color='red' type='warning' message='waaaah' /> // display my alert here.
        </div>
        <main>
          <App />
        </main>
      </div>
      <footer className='mt-10'></footer>
    </div>
  </React.StrictMode>,
  document.getElementById('root')
);

मैंने alert() का उपयोग करने का प्रयास किया है लेकिन यह मुझे [object object] के साथ मानक पॉपअप देता है

कोई भी विचार है कि मैं इन सभी 3 फाइलों को कैसे प्राप्त कर सकता हूं ताकि getData() में सशर्त मिलने पर अलर्ट को बंद करने के लिए प्रत्येक से बात की जा सके।

यह मेरा अलर्ट घटक है...मैं इसे वैसे ही रखना चाहता हूं जैसे यह है

import React from 'react';

export const Alert = ({ color, type, message }) => {
  const [showAlert, setShowAlert] = React.useState(true);

  function AlertType(props) {
    const alertType = props.alertType;

    if (alertType === 'success') {
      return (
        <span role='img' className='text-3xl'>
          🎉
        </span>
      );
    }

    if (alertType === 'warning') {
      return (
        <span role='img' className='text-3xl'>
          😱
        </span>
      );
    }
  }

  return (
    <>
      {showAlert ? (
        <div
          className={
            'text-white px-6 py-4 border-0 rounded relative mb-4 bg-' + color + '-500 flex items-center'
          }>
          <span className='text-xl inline-block mr-5 align-middle'>
            <AlertType alertType={type} />
          </span>
          <span className='inline-block align-middle mr-8'>
            <b className='uppercase'>{type}! </b>
            <span className='capitalize'>{message}</span>
          </span>
          <button
            className='absolute bg-transparent text-2xl font-semibold leading-none right-0 top-0 mt-4 mr-6 outline-none focus:outline-none'
            onClick={() => setShowAlert(false)}>
            <span>×</span>
          </button>
        </div>
      ) : null}
    </>
  );
};

export default Alert;
5
mrpbennett 5 जुलाई 2021, 19:15

2 जवाब

सबसे बढ़िया उत्तर

आप नीचे दिए गए प्रतिक्रिया-सार्वभौमिक-फ्लैश का उपयोग करके मामूली संशोधन के साथ प्रश्न में दिए गए अलर्ट घटक का उपयोग कर सकते हैं

बस इसे फ्लैशर घटक के बच्चे के रूप में उपयोग करें

export const Alert = ({ content, type, deleteFlash}) => {
  const {color,inpType} = type;

  function AlertType(props) {
    const alertType = props.alertType;

    if (alertType === 'success') {
      return (
        <span role='img' className='text-3xl'>
          🎉
        </span>
      );
    }

    if (alertType === 'warning') {
      return (
        <span role='img' className='text-3xl'>
          😱
        </span>
      );
    }
  }

  return (
        <div
          className={
            'text-white px-6 py-4 border-0 rounded relative mb-4 bg-' + color + '-500 flex items-center'
          }>
          <span className='text-xl inline-block mr-5 align-middle'>
            <AlertType alertType={inpType} />
          </span>
          <span className='inline-block align-middle mr-8'>
            <b className='uppercase'>{inpType}! </b>
            <span className='capitalize'>{content}</span>
          </span>
          <button
            className='absolute bg-transparent text-2xl font-semibold leading-none right-0 top-0 mt-4 mr-6 outline-none focus:outline-none'
            onClick={deleteFlash}>
            <span>×</span>
          </button>
        </div>
  );
};

export default Alert;


//Import it and use it as child of Flasher from react-universal-flash


<Flasher>
<Alert>
</Flasher>

आप "top_left", "top_right" इत्यादि जैसे पृष्ठ में कहीं भी स्थित करने के लिए फ्लैशर की स्थिति प्रोप को बदल सकते हैं

संदेशों को सक्रिय करते समय आप फ्लैश आयात कर सकते हैं और अपने अलर्ट में कस्टम प्रकार के आधार पर पैरामीटर पास कर सकते हैं

// src/utils/debugger
async function getData(filter, captureName) {
  if (captureName === '') {
flash("this is an error",6000,{color:"red":inpType:"warning"})
  } else {
    axios({
      method: 'GET',
      url: `http://xxx/debugger/${filter}/${captureName}/logs`,
    })
      .then((res) => {
        if (res.data.length === 0) {
flash("this is an error",6000,{color:"red":inpType:"warning"})
        } else {

flash("this is an error",6000,{color:"green":inpType:"success"})
          console.log(res.data);
          data = res.data;
        }

        return res.data;
      })
      .catch((err) => {
        console.log(err);
      });
  }
}

5
Anish Antony 6 जुलाई 2021, 04:42

आप प्रतिक्रिया घटक को अलर्ट () में पास नहीं कर सकते। चेतावनी() एक स्ट्रिंग की अपेक्षा करता है।

2
Neal Burns 5 जुलाई 2021, 19:58