我有这个来自 devextreme 代码块的 radioGroup。我想为网页中显示的文本着色,即接受的颜色应为绿色,拒绝的颜色应为红色。
代码:
import React from 'react';
import RadioGroup from 'devextreme-react/radio-group';
const MyComponent = () => {
const items = [
{ id: 1, label: 'Accepted' },
{ id: 2, label: 'Rejected' },
];
const defaultValue = items[1].id;
// Set the default selected value
return (
<RadioGroup
items={items}
displayExpr="label" // Define the property to display in the radio button label
valueExpr="id" // Define the property to use as the value
defaultValue={defaultValue}
onValueChanged={value => console.log('Selected value:', value)}
/>
);
};
export default MyComponent;
我尝试渲染每个组件,但未能应用颜色
通过使用 devextreme itemComponent 中的预定义方法,我们可以调出您想要显示的道具。使用样式标签为其添加颜色。
import React from 'react';
import RadioGroup from 'devextreme-react/radio-group';
const MyComponent = () => {
const items = [
{ id: 1, label: 'Accepted' },
{ id: 2, label: 'Rejected' },
];
const defaultValue = items[1].id;
// Set the default selected value
return (
<RadioGroup
items={items}
displayExpr="label" // Define the property to display in the radio button label
valueExpr="id" // Define the property to use as the value
defaultValue={defaultValue}
onValueChanged={value => console.log('Selected value:', value)}
itemComponent={({...restProps }) => (
<div style={{color:restProps.data.id===1?'green':'red'}}> {restProps.data.label}
</div>
)}
/>
);
};
export default MyComponent;
如果需要应用状态更改,请使用状态管理