如何使用“纯”react创建一个RadioButtonGroup？

使用纯React创建一个RadioButtonGroup可以通过以下步骤实现：

首先，创建一个名为RadioButtonGroup的React组件，并导入React库：

import React from 'react';

在RadioButtonGroup组件中，定义一个状态变量来存储选中的单选按钮的值：

class RadioButtonGroup extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      selectedValue: ''
    };
  }
}

在RadioButtonGroup组件中，创建一个handleChange函数来处理单选按钮的选择事件，并更新选中的值：

handleChange = (event) => {
  this.setState({
    selectedValue: event.target.value
  });
}

在RadioButtonGroup组件的render方法中，使用map函数遍历传入的选项数组，并创建单选按钮：

render() {
  const { options } = this.props;
  const { selectedValue } = this.state;

  return (
    <div>
      {options.map((option, index) => (
        <label key={index}>
          <input
            type="radio"
            value={option.value}
            checked={selectedValue === option.value}
            onChange={this.handleChange}
          />
          {option.label}
        </label>
      ))}
    </div>
  );
}

最后，将RadioButtonGroup组件导出供其他组件使用：

export default RadioButtonGroup;

使用示例：

import React from 'react';
import RadioButtonGroup from './RadioButtonGroup';

class App extends React.Component {
  render() {
    const options = [
      { value: 'option1', label: 'Option 1' },
      { value: 'option2', label: 'Option 2' },
      { value: 'option3', label: 'Option 3' }
    ];

    return (
      <div>
        <h1>RadioButtonGroup Example</h1>
        <RadioButtonGroup options={options} />
      </div>
    );
  }
}

export default App;

这样，你就可以使用纯React创建一个RadioButtonGroup组件了。在这个组件中，你可以传入一个选项数组，每个选项包含一个值和标签。用户选择单选按钮时，组件会更新选中的值，并通过handleChange函数进行处理。