反应和 forwardRef

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);}}/>

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

我有一个 table 组件，它从正文中获取数据：

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

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

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

React and forwardRef

reactjs

react-hoc

react-forwardref