reactjs - 操作 React 渲染属性

Question

我有一个反应组件，它通过反应多选组件呈现数据。我需要改变数据呈现的方式。该库有一个属性 - ItemRenderer 但我不确定如何操作这些属性。例如：

当前数据渲染：

• 123项红色
• 124项目蓝色
• 204项绿色

所需的数据渲染：

• 项目红色 (125)
• 项目蓝色 (124)
• 项目绿色 (204)

实际的 UI 代码如下：

return (
<div>
   <MultiSelect
     options={dataListOptions}
     value = {selectedListOptions}
     onChange = {setSelectedOptions}
</div>
);

标签： reactjs

Answer 1

您可以使用 来操作每个项目的标签ItemRenderer。见下文：

export default function App() {
  const options = [
    { label: "Grapes ", value: "grapes" },
    { label: "Mango ", value: "mango" },
    { label: "Strawberry ", value: "strawberry", disabled: true }
  ];
  const [selected, setSelected] = useState([]);

  return (
    <div>
      <h1>Select Fruits</h1>
      <pre>{JSON.stringify(selected)}</pre>
      <MultiSelect
        options={options}
        value={selected}
        onChange={setSelected}
        labelledBy={"Select"}
        ItemRenderer={data => data.option.label + " CHANGED"}
      />
    </div>
  );
}

它将呈现如下选项：

• 葡萄变了
• 芒果变了
• 草莓变了

在您的情况下，由于ItemRendererprops 接受一个函数，您只需随意修改它。