React가 있는 Wordpress 플러그인의 쇼트 코드 특성

React가 있는 Wordpress 플러그인의 쇼트 코드 특성

Wordpress(@wordpress/scripts 사용)에서 속성을 리액트 기반 플러그인으로 전달하는 방법을 찾고 있습니다.

나의 메인.php 파일:

<?php
defined( 'ABSPATH' ) or die( 'Direct script access disallowed.' );

define( 'ERW_WIDGET_PATH', plugin_dir_path( __FILE__ ) . '/widget' );
define( 'ERW_ASSET_MANIFEST', ERW_WIDGET_PATH . '/build/asset-manifest.json' );
define( 'ERW_INCLUDES', plugin_dir_path( __FILE__ ) . '/includes' );

add_shortcode( 'my_app', 'my_app' );
/**
 * Registers a shortcode that simply displays a placeholder for our React App.
 */
function my_app( $atts = array(), $content = null , $tag = 'my_app' ){
    ob_start();
    ?>
        <div id="app">Loading...</div>
        <?php wp_enqueue_script( 'my-app', plugins_url( 'build/index.js', __FILE__ ), array( 'wp-element' ), time(), true ); ?>
    <?php 
    return ob_get_clean();
}

이 쇼트코드 [my_app form="fload"]로 앱을 로드하려면 이 속성을 wp_enqueue_script()에 어떻게 전달해야 하며, 이 속성에 따라 콘텐츠를 리액션 측에 표시해야 합니까?속성이 'register'인 경우 레지스터 양식을 표시하려고 합니다.

내 리액트 메인 파일:

import axios from 'axios';
const { Component, render } = wp.element;

class WP_App extends Component { 
constructor(props) {
    super(props);
    this.state = { username: '', password: '' };
    this.handleUsernameChange = this.handleUsernameChange.bind(this);
    this.handlePasswordChange = this.handlePasswordChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
}

render() {
    return (
        <div class="login">
            <form onSubmit={this.handleSubmit} class="justify-content-center">
            <div class="form-group">
                <label htmlFor="username">
                    Username
                </label>
                <input
                    class="form-control"
                    id="username"
                    onChange={this.handleUsernameChange}
                    value={this.state.username}
                    type="email"
                />
             </div>
            <div class="form-group">
                <label htmlFor="password">
                    Password
                </label>
                <input
                    class="form-control"
                    id="password"
                    onChange={this.handlePasswordChange}
                    value={this.state.password}
                    type="password"
                />
            </div>
            <button class="btn btn-primary">
                Submit
            </button>
            </form>
        </div>
    );
}

handleUsernameChange(e) {
    this.setState({ username: e.target.value });
}

handlePasswordChange(e) {
    this.setState({ password: e.target.value });
}

handleSubmit(e) {
    e.preventDefault();
    if (!this.state.username.length) {
        return;
    }
    if (!this.state.password.length) {
        return;
    }
    const creds = { username: this.state.username,
                    password: this.state.password };
    axios.post('https://example.com:8443/login', creds)
        .then(response => {
                console.log("SUCCESSS")
                window.open('https://example.com/login?t=' + response.data.token, "_blank")  
            }
        )
        .catch(error => {
            if (error.response && error.response.data){
                if (error.response.data === "USER_DISABLED"){
                    console.log("User account disabled."
                    )
                }
                if (error.response.data === "ACCOUNT_LOCKED"){
                    console.log("User account is locked probably due to too many failed login attempts."
                    )
                }
                else{
                    console.log("Login failed."
                    )
                }
            }
            else{
                console.log("Login failed."
                )
                
            }
            console.log(error.response)
        });
}
}


render(
    <WP_App />,
    document.getElementById('app')
);

스크립트용 커스텀 데이터를 로드하는 워드프레스 방법은wp_localize_script기능.

참고로 쇼트 코드 함수를 다시 작성할 수도 있습니다.

add_shortcode( 'my_app', 'my_app' );
/**
 * Registers a shortcode that simply displays a placeholder for our React App.
 */
function my_app( $atts = array(), $content = null , $tag = 'my_app' ){
    add_action( 'wp_enqueue_scripts', function() use ($atts) {
        wp_enqueue_script( 'my-app', plugins_url( 'build/index.js', __FILE__ ), array( 'wp-element' ), time(), true );
        wp_localize_script(
            'my-app',
            'myAppWpData',
            $atts 
        );
    });

    return '<div id="app">Loading...</div>';
}

그런 다음 JavaScript를 통해 쇼트코드 설정 개체를 사용할 수 있습니다.

window.myAppWpData['form'] // if you set form as shortcode param

그런 다음 이 옵션을 반응 WP_App 컴포넌트의 소품 파라미터로 설정할 수 있습니다.

그런 다음 WP_APP 콘텐츠를 조건부로 쇼트코드 파라미터로 렌더링할 수 있습니다.

메인 렌더링:

render(
    <WP_App shortcodeSettings={window.myAppWpData} />,
    document.getElementById('app')
);

반응측에서 이 속성에 따라 콘텐츠를 표시하려면 어떻게 해야 합니까?

쇼트 코드 atts 값에 따라 조건부 로직을 사용할 수 있습니다.공식 문서 페이지에서 확인할 수 있는 조건부 리액트 로직에 대한 자세한 내용은 다음과 같습니다.

https://reactjs.org/docs/conditional-rendering.html

WP_APP 렌더링:

사용할 수 있다props.shortcodeSettingsWP_APP 내부render()기능을 사용하여 컴포넌트를 표시할 로직을 구축할 수 있습니다.

render() {
    return (
       // you could use props.shortcodeSettings to build any logic
       // ...your code
    )
}

페이지에 쇼트 코드를 복수 설정하는 경우.

추가할 수 있습니다.uniqid( 'my-app' )핸들 이름을 스크립트로 쓰다

function my_app( $atts = array(), $content = null, $tag = 'my_app' ) {
    $id = uniqid( 'my-app' );
    
    add_action( 'wp_enqueue_scripts', function () use ( $atts, $id ) {
        wp_enqueue_script( "my-app", plugins_url( 'build/index.js', __FILE__ ), array( 'wp-element' ), time(), true );
        wp_localize_script(
            "my-app",
            "myAppWpData-$id",
            $atts
        );
    } );

    return sprintf( '<div id="app-%1" data-my-app="%1">Loading...</div>', $id );
}

이 방법에서는, 고객의 요구에 맞추어index.js여러 앱의 파일 로직,

const shortcodesApps = document.querySelectorAll('[data-my-app]');

shortcodesApps.forEach((node) => {
    const nodeID = node.getAttribute('data-my-app');
    const shortcodeSettings = window[`myAppWpData-${nodeID}`];

    render(
        <WP_App shortcodeSettings={shortcodeSettings} />,
        node
    );
})

언급URL : https://stackoverflow.com/questions/63050614/shortcode-attributes-in-wordpress-plugin-with-react