Question

我想创建一个High-Order Component来处理孩子根据传递的permissions属性进行渲染的方式。

这就是我现在所拥有的：

import React from "react";
const PERMISSION_VIEW = 1;
const PERMISSION_EDIT = 1 << 1;

// A High-Order Component that adds visual feedback according to the
// permissions prop that gets passed to it    
function withPermissions(Component) {
  const wrapper = (props, ref) => {
    const { permissions } = props;

    // Do not apply any permissions handling if we don't
    // pass any permissions
    if (permissions === undefined) {
      return <Component {...props} forwardedRef={ref} />;
    }

    const propChanges = [];
    let afterElements = [];

    if ((permissions & PERMISSION_VIEW) === 0) {
      // We'll assume that the data is already filtered from the server
      afterElements.push(
        <span key={0}>You do not have permissions to view this field</span>
      );
    }

    if ((permissions & PERMISSION_EDIT) === 0) {
      afterElements.push(
        <span key={1}>You do not have permissions to edit this field</span>
      );
      propChanges.push({ readOnly: true, disabled: true });
    }
    props = Object.assign({}, props, ...propChanges);
    return (
      <React.Fragment>
        <Component {...props} forwardedRef={ref} /> {afterElements}
      </React.Fragment>
    );
  };

  // Give this component a more helpful display name in DevTools.
  // e.g. "ForwardRef(logProps(MyComponent))"
  const name = Component.displayName || Component.name;
  wrapper.displayName = `withPermissions(${name})`;

  return React.forwardRef(wrapper);
}

这是一个使用示例

function Data(props) {
  return props.value || "";
}
Data = withPermissions(Data);

const ref = React.createRef();


const App = () => <Data permissions={0} ref={ref} value="111" />;
console.log(App);
ReactDOM.render(<App />, document.getElementById("root"));

这个is working但我想要做的是根据组件的类型有额外的行为

例如，如果它是input元素并且没有编辑权限，请填写字段readonly
如果它是textarea元素并且没有查看权限，请创建字段readonly
如果是链接且没有查看权限，请删除href道具等...

这件事有可能吗？有没有更好的方法来解决这个问题？

Answer 1

您应该传递条件属性，如下所示：

<input type="text" readonly={props.value && PERMISSION_EDIT} />

现在，如果用户没有PERMISSION_EDIT，那么readonly就会在那里。

感谢@dfsq清除了位运算符。

Answer 2

刚才意识到我错了。以不同的方式处理它的包裹控制器不应该是HOC的工作。包裹的组件应与“界面”兼容。而是取代了HOC。

所以我做了什么：离开HOC原样。确保我用HOC包装的所有组件都处理readOnly和disabled道具，但未经许可知识。

如果JS是一种打字语言，我也会为它创建一个界面，但现在必须这样做：）

如何构建一个了解它的孩子的高阶组件

2 个答案: