0

我有以下组件将复选框转换为漂亮的切换开关

const ToggleSwitch = forwardRef((props, ref) => {

  return (
    <div className={`toggle btn btn-lg>
      <input type='checkbox' onChange={handleOnChange} ref={ref} />
      <div className='toggle-group'>
        <label htmlFor={`toggle-${uniqueId}`} className={`btn btn-success btn-lg toggle-on`} ref={labelOn}>In Use</label>
        <label htmlFor={`toggle-${uniqueId}`} className={`btn btn-danger btn-lg toggle-off`} ref={labelOff}>Not in Use</label>
        <span className={`toggle-handle btn btn-light btn-lg`} ref={handle}></span>
      </div>
    </div>
  );
});

我在理解前向引用的工作原理时遇到了问题，并且遇到了一些错误。我也可能被 HOC 组件弄糊涂了

如果我像这样从不同的组件调用它：

 <ToggleSwitch checked={false} toggleName='monitoring' ref={(e) => {monitoring.current = e;register(e);}}/>

它按预期工作，没有任何问题。但是，如果我按以下方式调用它：

我有一个从正文获取数据的表格组件：

 const body = [{ key: 'inUse', type: 'component', component: ToggleSwitch, props: { checked: 'inUse', onChange: onToggleChange } }, { key: 'vlan' }, { key: 'clientId' }];

每个键都是列。现在在表格组件中，我有一个基于类型的开关。如果类型 = “组件”

return <td>{component({ ...field.props, checked: entry[field.props.checked], entry: entry })}</td>

在这里我得到一个错误： Uncaught TypeError: component is not a function

任何帮助，将不胜感激。我查看了类似的问题，但找不到任何解决方案。谢谢

4

1 回答 1

2

你不应该直接调用你的组件，而是将它们传递给createElement函数：

return (
  <td>
    {createElement(component, {
      ...field.props,
      checked: entry[field.props.checked],
      entry: entry,
    })}
  </td>
);

你也可以在这里使用 JSX，但是使用 JSX 你必须component用大写字母命名你的属性，所以转换不会将它与 html 或自定义元素混淆。

于 2021-03-05T16:31:47.563 回答