在自定义古腾堡块中获取对象对象答案

【问题标题】：Getting object object in a custom gutenberg block在自定义古腾堡块中获取对象对象
【发布时间】：2021-08-06 15:09:38
【问题描述】：

我有一个问题。我是新手，还在学习:)

我想用古腾堡创建一个评论区。并且评级必须是星级。但由于某种原因，我没有得到它的工作。也许我做错了，也许这是不可能的。我希望有人能向我解释一下。

现在我已经创建了一个选择控件，并且可以正常工作。选择 A 时，我得到 A。但我想替换值：A 为星：

我有什么

<SelectControl
  multiple
  label={ __( 'Select some users:' ) }
  value={ testimonial.selectcontrol } // e.g: value = [ 'a', 'c' ]
  onChange={ (value) => handleTestimonialChange('selectcontrol', value, index ) }
  options={ [
   { value: null, label: 'Select a User', disabled: true },
   { value: 'a', label: 'User A' },
   { value: 'b', label: 'User B' },
   { value: 'c', label: 'User c' },
    ] }
/>

我想要什么

<SelectControl
  multiple
  label={ __( 'Select some users:' ) }
  value={ testimonial.selectcontrol } // e.g: value = [ 'a', 'c' ]
  onChange={ (value) => handleTestimonialChange('selectcontrol', value, index ) }
  options={ [
   { value: null, label: 'Select a User', disabled: true },
   { value: <i class="fas fa-star"></i>, label: 'User A' },
   { value: 'b', label: 'User B' },
   { value: 'c', label: 'User c' },
    ] }
/>

这段代码中返回的值：

selectcontrolDisplay =props.attributes.testimonial.map((testimonial, index) => { 返回 {testimonial.selectcontrol}; });

我在 Wordpress 的支持下得到的是对象对象。如上所述，我不确定或可能。如果有人可以用相同的结果解释不同的东西。我很高兴。

如果需要完整代码，请告诉我。

【问题讨论】：

标签： javascript reactjs wordpress wordpress-gutenberg

【解决方案1】：

我认为你得到[object object] 的原因是在JSX 中<i class="fas fa-star"></i> 被转换成一个React 组件（一个对象）。所以在你的onChange={ (value) => {...} } 行中，value 是一个 React 组件（一个对象）不是你想要输出的 HTML。我建议使用其他标识符作为选项值（例如字符串），然后在渲染时将其转换为星形图标：

props.attributes.testimonial.map((testimonial, index) => {
  return (testimonial.selectcontrol === 'star')
    ? <i class="fas fa-star"></i>
    : testimonial.selectcontrol;
}

【讨论】：

感谢您的时间和回答！我做了一个小的改动，将'==='更改为'=='。 selectcontrolDisplay = props.attributes.testimonial.map( ( testimonial, index ) => { return (testimonial.selectcontrol == 'star') ? : testimonial.selectcontrol; });

【解决方案2】：

感谢您的时间和回答！我做了一个小的改动，我把 '===' 改成了 '=='。

  selectcontrolDisplay = props.attributes.testimonial.map( ( testimonial, index ) => {
   return  (testimonial.selectcontrol == 'star') ? <i class="fas fa-star"></i> : testimonial.selectcontrol;
   } );

【讨论】：