在 className 中插入变量以检查 true/false 条件

Question

我基于 React 做了一个古腾堡块，我有一个代码：

import { __ } from '@wordpress/i18n';
import {
    useBlockProps,
    BlockControls,
    AlignmentToolbar,
    RichText,
    InspectorControls,
} from '@wordpress/block-editor';
import { PanelBody, ToggleControl } from '@wordpress/components';
import './editor.scss';
import classnames from 'classnames';

function ButtonEdit(props) {
    const { attributes, setAttributes } = props;
    const { url, text, title, textAlignment, gbButtonWidth } = attributes;

    const setButtonText = (newText) => {
        setAttributes({ text: newText });
    };

    const onChangeButtonAlignment = (newAlignment) => {
        setAttributes({ textAlignment: newAlignment });
    };

    const alignClasses = classnames(`gb-button-align-${textAlignment}`);

    return (
        <>
            <BlockControls>
                <AlignmentToolbar
                    value={textAlignment}
                    onChange={onChangeButtonAlignment}
                />
            </BlockControls>
            <InspectorControls>
                <PanelBody title={__('Button Settings', 'gb-button')}>
                    <ToggleControl
                        label={__('Change button width', 'gb-button')}
                        className="toggleImage"
                        help={
                            gbButtonWidth
                                ? __('Width 100%', 'gb-button')
                                : __('Default width', 'gb-button')
                        }
                        onChange={(boolean) => {
                            setAttributes({ gbButtonWidth: boolean });
                        }}
                        checked={gbButtonWidth}
                    />
                </PanelBody>
            </InspectorControls>
            <div
                {...useBlockProps({
                    className: alignClasses,
                })}
            >
                <>
                    <div className="wp-block-multiple-blocks-gb-button__wrapper">
                        <div className={`wp-block-multiple-blocks-gb-button__btn ${gbButtonWidth} full-width`}>
                            <RichText
                                className="wp-block-multiple-blocks-gb-button__btn-text"
                                href={url}
                                aria-label={__('Button text', 'gb-button')}
                                placeholder={__('Add text…', 'gb-button')}
                                title={title}
                                value={text}
                                onChange={(value) => setButtonText(value)}
                                identifier="text"
                            />
                        </div>
                    </div>
                </>
            </div>
        </>
    );
}

export default ButtonEdit;

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

我有一个变量“gbButtonWidth”，它负责切换和更改 true/false 条件。

这里，当你点击toggle的时候，true的时候应该加上这个class:

`wp-block-multiple-blocks-gb-button__btn`

额外 class:

`full-width`

如果您点击切换并触发 false，则将其删除。

切换完成，true/false 有效。

我只有在通过检查 $variable

向当前 class 添加额外的 class 时遇到问题

Answer 1

您可以在 handleClick 函数中添加一个参数（变量值）

...
 onclick="handleClick(gbButtonWidth)"

和

根据它的值你可以add/removeclass

function handleClick(value) {
        let elem = document.querySelector(".text");

        if (value) { /// add full-width when variable is true
           elem.classList.add("full-width");
        } else {
           /// remove full-width when variable is false
           elem.classList.remove("full-width");
 }
      }

function handleClick(value) {
        let elem = document.querySelector(".text");

        if (value) { //

    function handleClick() {
        let elem = document.querySelector(".text");

        if (elem.classList.contains("toggle")) {
          elem.classList.remove("toggle");
        } else {
          elem.classList.add("toggle");
        }
      }

.text{
color: red
}
.toggle{
background:green
}

<button onclick="handleClick()">
Click ME
</button>
<h1 class="text">Hello</h1>

Answer 2

<div className={`wp-block-multiple-blocks-gb-button__btn ${gbButtonWidth ? 'full-width' : ''}`}>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

在 className 中插入变量以检查 true/false 条件

Insert variable in className to check the true/false condition

wordpress

reactjs

wordpress-gutenberg