获取自定义gutenberg块中的object object

Question

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

我想用gutenberg创建一个review block。评级必须是星级。但出于某种原因，我没有得到它的工作。也许我做错了，也许是不可能的。我希望有人能给我解释一下。

现在我已经创建了一个selectcontrol，这是有效的。当选择A时，我得到A，但我想将value: A替换为星号:

What i have

<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' },
] }
/>

What i want

<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((证言，索引)=>{Return{testimony .selectcontrol};});

我从Wordpress后台得到的是object object。就像上面提到的，我不确定是否可能。如果有人能以不同的方式解释相同的结果。我很乐意。

如果需要完整的代码，请让我知道。

Answer 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;
}

Answer 2

感谢您的回复!我把"==="改成了"=="。

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