Question

我正在用react和nodejs开发脚本。这个想法是关于使用甜蜜警报2从json到反应页面显示内容。

输出未显示结果，该结果假定为显示json文件中的内容。

这是我的密码

import React from 'react';
import Swal from 'sweetalert2';
import withReactContent from 'sweetalert2-react-content';
const MySwal = withReactContent(Swal);
const json = require('json-loader!./myfilepath.json');
class pageJSONOCR extends React.Component
{

getData = () =>

{

    console.log("Button Clicked");

    MySwal.fire({

        title: 'Success!',

        text: "Button is clicked",

        type: 'success',

        showCancelButton: false,

        confirmButtonText: 'View File'

      }).then((result) => {

        if (result.value) {

            MySwal.fire(

                'The Content Of Json File',

                `${json}` 

          )

        }

      })

}

render()

{

    console.log("Header - Rendered");

    return(

        <div className="container">

            <div className="py-5 text-center">

                <div className="jumbotron">

                    <div className="container">

                        <h1>Out Put</h1>

                        <hr/>

                        <p className="lead">Check The JSON File</p>

                        <button className="btn btn-primary" value="Submit" onClick={this.getData}>Submit</button>

                    </div>

                </div>

            </div>

        </div>

    );

}
}
export default pageJSONOCR;

如果有任何解决方案，请帮助我。

谢谢！

Answer 1

使用sweetalert2-react-content

import withReactContent from 'sweetalert2-react-content';
import Swal from 'sweetalert2';

const basic = withReactContent(Swal.mixin({
  title: 'Success',
  text: 'text here.',
  confirmButtonText: "Okay.",
  showCloseButton: true,
  showCancelButton: true,
  cancelButtonText: 'Cancel'
}));

...
<div>
  {
    basic.mixin({
        title: <i>title</i>
      }).fire()
  }
</div>

如何使用带有甜蜜警报2的react jsx显示json数据？

1 个答案: