Question

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

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>

在这里我得到一个错误：未捕获的类型错误：组件不是函数

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

Answer 1

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

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

您也可以在此处使用 JSX，但使用 JSX，您必须用大写字母命名您的 component 属性，因此转换不会将其与 html 或自定义元素混淆。

反应和 forwardRef

1 个答案: