微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

Wordpress Gutenberg Block Plugin:从 register_block_type renderCallback 获取数据并在 JSX Edit() 函数中显示?

如何解决Wordpress Gutenberg Block Plugin:从 register_block_type renderCallback 获取数据并在 JSX Edit() 函数中显示?

我在 plugin.PHP 入口点内的 Gutenberg 自定义插件中做了一个自定义 wordpress MysqL查询(我在 wordpress DB 中创建了一个新表“employees”):

mytheme_blocks_register_block_type('pruefungenBlock',array(
        'render_callback' => 'mytheme_blocks_render_pruefungen_table','attributes' => array(
            'finishedData' => array(
                'type' => 'array',),)
    ));

和我的 render_callback 函数

function mytheme_blocks_render_pruefungen_table() {
    global $wpdb;
    $xmlArr = getparsedXMLArray();
    $uniqueIDArr = getUniqueID($xmlArr);

    $kurs_db = $wpdb->get_results(" SELECT disTINCT kurs_ort_id,kurs_ort FROM ".$wpdb->prefix . "bsa_location ");
    $objJsonDocument = json_encode($kurs_db);
    $pruefungen = json_decode($objJsonDocument,TRUE);
    $foundplaces = getAssociatedplaces($pruefungen,$uniqueIDArr);

    $finishedData = addplace($xmlArr,$foundplaces);
    print_r($finishedData);
    return $finishedData;
}

最终呈现表格:

function renderTable() {
    global $finishedData;

    $table ="";
    $table .= '<div class="container">
                            <div class="row">
                                    <input id="start-date" > <input id="end-date">
                                    <div class="col-xs-12">
                                    <table id="pruefungentable"  class="table striped dark" style="width: 100%">
                                            <thead class="thead-dark ">
                                                    <tr scope="row" class="table-danger">
                                                            <th>#</th>
                                                            <th>KursID</th>
                                                            <!--<th>KursOrtID</th>-->
                                                            <th>KursOrt</th>
                                                            <th>Modul</th>
                                                            <th>Datum</th>      
                                                    </tr>
                                            </thead>
                                            <tbody>';
                                            $count = 0;
                                            foreach($finishedData as $entry) {
                                                    $ID = ++$count;
                                                    $KursID=$entry["KursID"];
                                                    //$KursOrtID=$entry["KursOrtID"];
                                                    $KursOrt=$entry["KursOrt"];
                                                    $Modul=$entry["Modul"];
                                                    $Datum=$entry["Datum"]; 

                                                    $table .=   "<tr><td>" .  $ID . "</td>";
                                                    $table .=    "<td>" .  $KursID . "</td>";
                                                    $table .= "<td>" . $KursOrt . "</td>";
                                                    $table .= "<td>" . $Modul ."</td>";
                                                    $table .= "<td>". strftime("%d.%m.%Y",strtotime($Datum)) ."</td></tr>";
                            
                                            } 
    $table .=           '</tbody>
                                            </table>     
                                    </div>
                            </div>
                    </div>';

    return $table;
}

我没有找到任何关于自定义查询的有用文档,除了 $wpdb 对象,我必须用它来导入:

require_once(realpath(WP_CONTENT_DIR . DIRECTORY_SEParaTOR . '../' . DIRECTORY_SEParaTOR . '/wp-includes/wp-db.PHP')); 

我只找到预定义的函数,如“get_posts()”等......所以我使用了 $wpdb 并返回了结果..

我想在我的 Gutenberg Block React JSX edit() 函数中使用 $finishedData 的查询结果,并在那里显示一个包含我的结果的表格... 但是,我无法在我的编辑功能中从该功能获取查询结果,这是我的组件:

import { Component } from "@wordpress/element";
import { withSelect } from "@wordpress/data";
import { __ } from "@wordpress/i18n";
import { useBlockProps } from '@wordpress/block-editor';

class PruefungenEdit extends Component {
    render() {
        const props = this.props;
        const blockProps = useBlockProps();
        console.log("blockprops:",blockProps);
        const { attributes,finishedData } = this.props;
        console.log("props:",props);
                console.log("attr:",attributes.finishedData);
                console.log("finishedData",finishedData);
        return <div>Test</div>;
    }
}

export default withSelect((select,props) => {
    const { attributes } = props;
    const { finishedData } = attributes;

    return {
            finishedData: finishedData ? finishedData : null,};
})(PruefungenEdit);

我不知道在 withSelect() 返回函数中做什么,因为我在很多教程中看到有一个

select("core").getEntityRecords("postType","post",query)

函数,但这些似乎也是为某些表(例如帖子)预定义的,所以不知道在这里做什么? 是否有一些简单的方法可以对新表进行简单查询并在 edit() 中显示结果?不会那么难吧?!?

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。