Question

我正在为单选按钮构建一个可重用的组件。自然地，在每种情况下都将需要知道多少个无线电是不可预测的，因此必须将其映射到阵列中。此外，该组件还需要尊重其将在其中呈现的HTM1结构，并且出于范围目的，RadioGroup和Radio按钮必须位于同一组件中。

我以这种方式工作：

组件

const CMRadioGroup = (props, context) => {
    return (
        <RadioGroup
            name={props.name}
            style={{flexDirection: "row"}}
            className={props.className}
            value={props.value}
            onChange={props.onChange}>
            {props.radios.map(radio => 
                <FormControlLabel
                    key={radio.value}
                    value={radio.value}
                    style={{marginRight: 40, height:30}}
                    control={<Radio />}
                    label={context.t(radio.label)} />,
            )}
        </RadioGroup>
    );
};

用法

<CMRadioGroup
   name="select"
   value={this.state.select}
   onChange={this.handleChangeSelect}
   //I don't like the part below
   radios={[
      {
         value:"radio1",
         label:"My First Radio",
      },
      {  
         value:"radio2",
         label:"My Second Radio",
       },
    ]}/>
}

如果不是将其用作json数组，则宁愿它们是可以用函数和其他道具（例如颜色，onChange等）支撑的功能项。例如这样的东西：

<CMRadioGroup
   name="select"
   value={this.state.select}
   onChange={this.handleChangeSelect}
   //This is better
   <Radio
      color="primary"
      value="radio1",
      label="My First Radio"/>
   <Radio
      color="primary"
      value="radio2",
      label="My Second Radio"/>
   ...
   <Radio
      color="secondary"
      value="radio-nth",
      label="My Nth Radio"/>
    ]}/>
}

先谢谢大家

Answer 1

假设您有一个父组件CMRadioGroup，该组件可以提取您需要的所有单选按钮。现在，您只需要构建一个RadioItemComponent即可接收来自CMRadioGroup的列表中的一项作为道具。

类似这样的东西：

    class CMRadioGroup extends Component{
        state={
            data: []
        }
        componentDidMount(){
            //some data fetching
            .then(data => this.setState({ data }))
        }

        render(){
          const items = this.state.data.map(item =>(<RadioItem item={item}/>))
          return(
              <div>{items}</div>

          )

        }

    }

然后在RadioItem中，您可以放置自己的逻辑并利用React的lyfecycle钩子等。

Answer 2

我能解释的是您希望将单选按钮作为子代传递给组件。您可以轻松地将它们传递为高潮。参见示例。

<CMRadioGroup
   name="select"
   value={this.state.select}
   onChange={this.handleChangeSelect}
   >
   <Radio
      color="primary"
      value="radio1",
      label="My First Radio"/>
   <Radio
      color="primary"
      value="radio2",
      label="My Second Radio"/>
   <Radio
      color="secondary"
      value="radio-nth",
      label="My Nth Radio"/>
</CMRadioGroup>

请勿将它们作为道具传递。这种方法的唯一缺点是，组件将在每次状态更改时重新渲染，因为将子级视为对象，并且与props进行比较时会比较浅（使用React.PureComponent时）。

在React可重用组件中生成组件数组的更好方法

2 个答案: