封装一个单选框组件，可以传值

好的，我可以帮你封装一个单选框组件，可以通过传值来设置选中项。以下是示例代码：

import React from 'react';

function RadioButton({ options, selectedOption, onChange }) {
  return (
    <div>
      {options.map(option => (
        <label key={option.value}>
          <input
            type="radio"
            value={option.value}
            checked={selectedOption === option.value}
            onChange={() => onChange(option.value)}
          />
          {option.label}
        </label>
      ))}
    </div>
  );
}

export default RadioButton;

其中，`options` 是单选框选项的数组，每个选项包含 `value` 和 `label` 两个属性；`selectedOption` 是当前选中的选项的值；`onChange` 是选中某个选项时的回调函数。

你可以在父组件中使用该组件，并通过传值来设置选中项，示例代码如下：

import React, { useState } from 'react';
import RadioButton from './RadioButton';

function App() {
  const [selectedOption, setSelectedOption] = useState('option1');
  const options = [
    { value: 'option1', label: 'Option 1' },
    { value: 'option2', label: 'Option 2' },
    { value: 'option3', label: 'Option 3' },
  ];

  const handleOptionChange = (value) => {
    setSelectedOption(value);
  };

  return (
    <div>
      <RadioButton
        options={options}
        selectedOption={selectedOption}
        onChange={handleOptionChange}
      />
    </div>
  );
}

export default App;

在上述示例中，我们使用了 `useState` 来保存当前选中项的值 `selectedOption`，并将其作为 `RadioButton` 组件的 `selectedOption` 属性传递进去。当用户选择某个选项时，`handleOptionChange` 函数会更新 `selectedOption` 的值，从而实现选中项的变更。