有什么方法可以为单选组的这些文本添加颜色

Question

我有这个来自 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;

我尝试渲染每个组件，但未能应用颜色

Answer 1

通过使用 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;

如果需要应用状态更改，请使用状态管理