Question

我正在尝试以react js中的形式动态呈现自定义按钮组件。

这是我的单选按钮组件。

export class CustomRadio extends Component {
  render() {
    return (
      <div>
        <FormGroup>
          <ControlLabel>{this.props.label}</ControlLabel>
          <br />

          <input type="radio" name={this.props.name} />
        </FormGroup>
      </div>
    );
  }
}

以下是我如何以表格形式调用该组件

 <CustomRadio label="status" />

无论如何，我都无法获得预期的输出。谁能帮我解决这个问题？

Answer 1

正如您在CustomRadio组件中提到的名称作为道具一样，您还必须从此处传递名称，如下所示：

<CustomRadio label="status" name="Xyz" />

Answer 2

首先，必须将组件导入为

import {CustomRadio} from './CustomRadio';  //because you are exporting as named export

另一件事，当您使用this.props.name时，必须将其传递为

<CustomRadio label="Status" name="name"/>

通过查看FormGroup，我认为您正在使用reactstrap，在reactstrap中，您可以使用它来获取radio按钮，

<FormGroup>
  <Label>
     <input type="radio" name={this.props.name} />
     {this.props.label}
  </Label>
</FormGroup>

Demo

动态呈现自定义单选按钮组件

2 个答案: