Question

我想要创建一个执行安全检查的React组件，如果它通过了它，则会渲染它的子节点，如果它失败则它不会渲染任何东西。

我已经搭建了这样一个组件：

var RolesRequired = React.createClass({
    permitted: roles => ...,

    render: function () {
        if (!this.permitted(this.props.roles)) {
            return null;
        }

        return this.props.children;
    }
});

我计划的用法是这样的：

<RolesRequired roles={['admin']}>
    <h1>Welcome to the admin</h1>
    <div>
        Admin stuff here
    </div>
</RolesRequired>

您如何从RolesRequired组件返回所有孩子？

Answer 1

我提出了这个解决方案：

var RolesRequired = React.createClass({
    permitted: roles => ...,

    render: function () {
        if (!this.permitted(this.props.roles)) {
            return null;
        }

        return <div>{this.props.children}</div>;
    }
});

我正在做的是将{@ 1}}中的孩子包裹起来，但我必须添加一个不需要/不需要的DOM元素来实现它。

Answer 2

我认为高阶组件（HOC）也是一个很好的选择。您基本上可以在HOC中包装任何定义某些行为的组件，并决定它是否应该呈现 wrappe 。

最好的方法是，如果您正在使用启用了某些ES2016功能的ES2015转换器（即装饰器）：

function withRoles(roles) {
  return function(Component) {
    return class ComponentWithRoles extends React.Component {
      constructor(props) {
        super(props)
        // Not sure where the data to get your roles about current user?
        // from but you could potentially to that here if I'm getting your point
        // and also setup listeners
        this.state = { currentUser: 'admin' }
      }

      validateRoles() {
        // you have access to the ``roles`` variable in this scope
        // you can use it to validate them.
        return true;
      }

      render() {
        if (this.validateRoles()) {
          return <Component {...this.props} />;
          )
        } else {
          return <div>Nope...</div>;
        }
      }
    }
  }
}

// You can then use this on any component as a decorator
@withRoles({ showOnlyFor: [ 'admin' ] })
class AdminOnlyComponent extends React.Component {
  render() {
    return <div> This is secert stuff </div>
  }
}

我已经使用了ES2016功能，因为我认为更好地了解这一点，但你可以通过一个简单的功能包装来实现它，这里是React核心成员之一的要点关于HOC的主题： https://gist.github.com/sebmarkbage/ef0bf1f338a7182b6775

在react.js中创建一个非呈现的包装器组件

2 个答案: