如果在 save props > return 字段中声明？

Question

是否可以在 return() 中从 react 中的 save props 中编写一个 if 语句？

因为写if语句的时候只看到前端的代码

因此发生了以下情况：

我创建了一个 Selectcontrol：

<SelectControl

              label={ __( 'Press ctrl to multiple stars:' ) }
              value={ testimonial.selectcontrol } // e.g: value = [ 'a', 'c' ]
              onChange={ (value) => handleTestimonialChange('selectcontrol', value, index ) }
              options={ [
                  { value: null, label: 'Select a Star', disabled: false },
                  { value: 'star' ,  label: 'Add 1 star' },
                  { value: 'star2', label: 'Add 2 stars' },
                  { value: 'star3', label: 'Add 3 stars' },
                  { value: 'star4', label: 'Add 4 stars' },
                  { value: 'star5', label: 'Add 5 stars' },
              ] }
            />

我用下面的代码渲染它，让后端有星星：

selectcontrolDisplay = props.attributes.testimonial.map( ( testimonial, index ) => {
          if (testimonial.selectcontrol == 'star') {
            return  (testimonial.selectcontrol == 'star') ? <span><i className="fas fa-star checked"></i></span> : testimonial.selectcontrol;
          } else if (testimonial.selectcontrol == 'star2') {
            return  (testimonial.selectcontrol == 'star2') ? <span><i className="fas fa-star checked"></i><i className="fas fa-star checked"></i></span> : testimonial.selectcontrol;
          } else if (testimonial.selectcontrol == 'star3') {
            return  (testimonial.selectcontrol == 'star3') ? <span><i className="fas fa-star checked"></i><i className="fas fa-star checked"></i><i className="fas fa-star checked"></i></span> : testimonial.selectcontrol;
          } else if (testimonial.selectcontrol == 'star4') {
            return  (testimonial.selectcontrol == 'star4') ? <span><i className="fas fa-star checked"></i><i className="fas fa-star checked"></i><i className="fas fa-star checked"></i><i className="fas fa-star checked"></i></span>: testimonial.selectcontrol;
          } else if (testimonial.selectcontrol == 'star5') {
            return  (testimonial.selectcontrol == 'star5') ? <span><i className="fas fa-star checked"></i><i className="fas fa-star checked"></i><i className="fas fa-star checked"></i><i className="fas fa-star checked"></i><i className="fas fa-star checked"></i></span> : testimonial.selectcontrol;
          }
        } );

在编辑器部分我有以下部分：

{selectcontrolDisplay && selectcontrolDisplay.map((selectcontrolValue, i) =>
                  <div className="wp-block-cgb-block-project-drie-testimonial-ratings">
                    <div className="wp-block-cgb-block-project-drie-testimonial-rating">
                      <h2>Rating</h2>
                      {selectcontrolValue}
                    </div>
                  </div>
                  )}

所以上面的工作正常，但对我来说最难的部分是在前端获取结果。

所以我想我可以让它与 if 语句一起工作。但我只看到前端的代码，而不是只有星星的结果。有人可以给我建议如何使这项工作吗？

save: ( props ) => {
const {attributes: { selectcontrol } } = props;

return (

html code.....

if (selectcontrol == 'star') {
                      <span><i className="fas fa-star checked"></i></span>
                    } else if (selectcontrol == 'star2') {
                      <span><i className="fas fa-star checked"></i><i className="fas fa-star checked"></i></span>
                    } else if (selectcontrol == 'star3') {
                      <span><i className="fas fa-star checked"></i><i className="fas fa-star checked"></i><i className="fas fa-star checked"></i></span>
                    } else if (selectcontrol == 'star4') {
                      <span><i className="fas fa-star checked"></i><i className="fas fa-star checked"></i><i className="fas fa-star checked"></i><i className="fas fa-star checked"></i></span>
                    } else if (selectcontrol == 'star5') {
                      <span><i className="fas fa-star checked"></i><i className="fas fa-star checked"></i><i className="fas fa-star checked"></i><i className="fas fa-star checked"></i><i className="fas fa-star checked"></i></span>
                    }

)

}

为了更好地了解：

save: ( props ) => {
    const {attributes: { title } } = props;
    const {attributes: { subtitle } } = props;
    const {attributes: { media} } = props;
    const {attributes: { testimonial } } = props;
    const {attributes: { selectcontrol } } = props;

  
    return (
      <section className="testimonial">
        <Helmet>
          <script type="text/javascript" src="//cdn.jsdelivr.net/gh/kenwheeler/slick@1.8.1/slick/slick.min.js"></script>
        </Helmet>
        <div className="container testimonial__container">
          <div className="row testimonial__row">
            <div className="testimonial__info">
              <div className="testimonial__subtext">
                <span>{ subtitle }</span>
              </div>
              <div className="testimonial__title">
                <h2>{ title }</h2>
              </div>
            </div>
            <div className="items testimonial__testimonials">
              {testimonial.map((field, i) => (
              <div className="testimonial__testimonial">
                <div className="testimonial__card" key={ i }>
                  <div className="testimonial__image">
                    <img src={field.media.url} />
                  </div>
                  <div className="testimonial__review">
                    <p>{field.testimonial}</p>
                  </div>
                    if (selectcontrol == 'star') {
                      <span><i className="fas fa-star checked"></i></span>
                    } else if (selectcontrol == 'star2') {
                      <span><i className="fas fa-star checked"></i><i className="fas fa-star checked"></i></span>
                    } else if (selectcontrol == 'star3') {
                      <span><i className="fas fa-star checked"></i><i className="fas fa-star checked"></i><i className="fas fa-star checked"></i></span>
                    } else if (selectcontrol == 'star4') {
                      <span><i className="fas fa-star checked"></i><i className="fas fa-star checked"></i><i className="fas fa-star checked"></i><i className="fas fa-star checked"></i></span>
                    } else if (selectcontrol == 'star5') {
                      <span><i className="fas fa-star checked"></i><i className="fas fa-star checked"></i><i className="fas fa-star checked"></i><i className="fas fa-star checked"></i><i className="fas fa-star checked"></i></span>
                    }
                  <div className="testimonial__stars">
                    <span>{testimonial.selectcontrol}</span>

                  </div>
                  <div className="testimonial__author">
                    <div className="testimonial__name">
                      <span>{ field.author }</span>
                    </div>
                    <div className="testimonial__function">
                      <span>{ field.position }</span>
                    </div>
                  </div>
                </div>
              </div>
              ))}
            </div>
          </div>
        </div>
      </section>
    );
    },

Answer 1

查看您的代码，您已经非常努力地使用 if/if else 语句来获得正确的标记来保存您的星星。您可以有 conditional rendering 语句，但是对于您 code/objective 为星星保存正确的标记，我可以建议另一种方法..

在编辑器中，您有一个 <SelectControl/> 用于设置“星级”，因此我们要在块属性中保存星级的值 .因此，假设我们已经在块属性中定义了“starRating”，例如：

block.json

{
    ...
    "attributes": {
        "starRating": {
            "type": "string",
            "default": "1"
        }
    }
}

我已将默认值设置为 1，因此 <SelectControl/>[ 上不需要空选项=25=]

在您的 Edit() 函数中有很多事情可以渲染您漂亮的星形图标，因此我将重点关注 <SelectControl/> 中所需的最低限度。通过使用数字，我们现在可以使用地图并轻松生成所需的选项标签和值：

edit.js

import { __ } from '@wordpress/i18n';
import { useBlockProps } from '@wordpress/block-editor';
import { SelectControl } from '@wordpress/components';

export default function Edit({ attributes, setAttributes }) {
const { starRating } = attributes;

    const STARS = [1, 2, 3, 4, 5];

    return (
        <div {...useBlockProps()}> 
            <SelectControl
                label={__('Set Star Rating')}
                value={starRating}
                options={STARS.map((number) => {
                    let label = '*'.repeat(number); // simple trick for number of stars
                     return {
                         label: label,
                         value: number
                     }
                })}
                onChange={(value) => setAttributes({ starRating: value })} />
        </div>
    );
}

接下来，在 save() 中，可以使用“starRating”的保存值生成正确的标记，同时避免 if if/else 语句：

save.js

import { useBlockProps } from '@wordpress/block-editor';
export default function save({ attributes }) {
    const { starRating } = attributes;

    return (
        <div {...useBlockProps.save()}>
            <span>
                {[...Array(parseInt(starRating))].map((item, index) =>
                    <i key={index} className="fas fa-star checked"></i>
                )}
            </span>
        </div>
    );
}

注意：react 需要“key”——它不会出现在保存的内容或前端中。

建议：鉴于您块中的所有内容，您可能很快就会发现管理 edit() 和 save() 一致性具有挑战性。尝试专注于您的块所做的特定功能，在您的情况下是“星级”。对于所有其他部分，例如推荐标题、推荐潜台词等，我建议创建一个 reusable block or block/post template 以便您将来可以轻松更改 layout/formatting/order 或 block/class 名称。 Updating/migrating 如果您需要更改保存的内容，块可能会非常具有挑战性 - 如果您可以避免这样做，将来您会感谢您！

如果在 save props > return 字段中声明？

if statement in the save props > return field?

javascript

reactjs

wordpress

wordpress-gutenberg