mui-datatables 示例不呈现示例代码

Posted 2023-02-22

技术标签:

【中文标题】mui-datatables 示例不呈现示例代码【英文标题】：mui-datatables example doesn't render sample code 【发布时间】：2020-06-21 23:53:08 【问题描述】：

刚接触 React 并尝试学习 MUI 数据表。库的page 上给出的Codebox 的示例代码不会在浏览器中为我呈现，我看到的只是一个空页面。控制台显示零错误。

我的 html：

<!DOCTYPE html>
    <head>
        <title>MUIDatables Example</title>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500">        
    </head>
    <body>
            <div id="root"></div>
        </body>
        <script src="Index0.js" type="text/jsx"></script>
</html>

除非指定了 'type="text/jsx"'，否则有关 CORS 和导入语句的错误将出现在控制台中。我正在使用 Node http-request 服务器，它确实在当前目录中加载了各种文件。目前控制台没有显示任何错误。

JS：

import React from "react";
import ReactDOM from "react-dom";
import MUIDataTable from "mui-datatables";

class App extends React.Component 
  render() 
    const columns = ["Name", "Title", "Location", "Age", "Salary"];

    const data = [
      ["Gabby George", "Business Analyst", "Minneapolis", 30, "$100,000"],
      ["Aiden Lloyd", "Business Consultant", "Dallas", 55, "$200,000"]
// other sample data omitted
    ];

    const options = 
      filterType: "dropdown",
      responsive: "scroll"
    ;

    return (
      <MUIDataTable
        title="ACME Employee list"
        data=data
        columns=columns
        options=options
      />
    );
  


ReactDOM.render(<App />, document.getElementById("root"));

【问题讨论】：

【参考方案1】：

您的代码似乎没问题。只需在末尾添加一行：export default App;我复制/粘贴您的代码并运行它。它完美地显示了表格。

import React, useState, useEffect from 'react';
import axios from 'axios';

function EditStudentDetails() 
    const [post, setPost] = useState();
    const id = 1;

    const handleChange = (target) => 
        const name, value = target;
        setPost(...post, [name]: value);
        console.log(post);
    ;

    const handleSubmit = async e => 
        e.preventDefault();

        const editDataById = async () => 
            try 
                const response = await axios.put(`https://jsonplaceholder.typicode.com/posts/$id`, 
                    method: 'PUT',
                    body: JSON.stringify(
                        id: id,
                        title: post.title,
                        body: post.body,
                        userId: 1
                    ),
                    headers: 
                        "Content-type": "application/json; charset=UTF-8"
                    
                )
                    .then(response => response.json())
                    .then(json => console.log(json));
                // latestEdit(response.data);
                console.warn(response.data);
             catch (error) 
                console.warn(error);
            
        ;
        editDataById();
    ;
    return (
        <div className='container'>
            <div className='row'>
                <div className='col-4'>
                    <form onSubmit=handleSubmit>
                        <div className="form-group">
                            <label htmlFor="name">Title</label>
                            <input type="text" name='title' value=post.title onChange=handleChange
                                   className="form-control" id="title"/>
                        </div>
                        <div className="form-group">
                            <label htmlFor="position">Body</label>
                            <input type="text" name='body' value=post.body
                                   onChange=handleChange className="form-control" id="body"/>
                        </div>
                        <button type="submit" className="btn btn-primary">Submit</button>
                    </form>
                </div>
            </div>
        </div>
    )


export default EditStudentDetails;

【讨论】：

以上是关于mui-datatables 示例不呈现示例代码的主要内容，如果未能解决你的问题，请参考以下文章

SiteMesh2-示例工程

NatTable 示例中是不是有任何 API 在单击查看源链接时显示源代码？

tesseract v3.03 使用可搜索文本示例呈现 PDF

如示例所示创建 xml 标头

Edward Angel 示例 OpenGL 代码：在 Lenovo X60 上运行良好，但不能在我的桌面上呈现窗口（英特尔高清显卡）

html 使用AngularJS MySearchboxDirective的示例。这演示了幻灯片http://slides.com/dj中演示的示例的一些修复