Reactコンポーネントをアンマウントできません。親コンポーネントからfalseを返します。

Question

特定のアクセス許可に対して子コンポーネントの承認を実行しようとしています。私はノードにアクセスするためにrefコールバックを使用しています。そこで、私はパーミッションをチェックできます。これらの権限に応じて、コンポーネントをアンマウントしたいと思います。

コールバック内で、ReactDOM.findDOMNode()を使用してからReactDOM.unmountComponentAtNode()を削除しようとしています。後者はfalseを返し続けますが、findDomNodeはDOM要素を適切に選択しているようです。

class Auth extends React.Component { 

    ... 

    checkPermissions(component) { 
     const domNode = ReactDOM.findDOMNode(component); // => <p>...</p> 

     if (domNode) { 
      let wasUnmounted = ReactDOM.unmountComponentAtNode(domNode); 
      console.log('was unmounted', wasUnmounted); // => false 
     } 
    } 

    render(){ 
     return (
      <div> 
       {this.state.authorized && 
        <Component ref={(c) => this.checkPermissions(c)} {...this.props} /> 
       } 
      </div> 
     ) 
    } 

    ... 

どのように効果的に私のコンポーネントを削除するReactDOM.unmountComponentAtNode()を使用することができますか？

Answer 1

パーミッションをチェックしてアンマウントするだけでは、ノードをマウントしたくないと思います。をレンダリングする前に、アクセス許可をチェックする必要があります。より安全なだけでなく、シンプルです。

ユーザーが承認されている場合は、コンポーネントをレンダリングします。ユーザーが承認されていない場合は、別のものをレンダリングします。

だから、種類のこのような何か：

render() { 
    if (!this.state.authorized) { 
    return <PleaseLogIn />; 
    } 

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

あなた自身が手動でDOMを操作見つけた場合は、バックステップを取ると、それを行うには、より「Reacty」方法はありませんことを確認してください。

更新：あなたは今

// state.userPermissions = ['permission1', 'permission1', 'betaTolerant']; 

const AuthWrapper = React.createClass({ 
    propTypes: { 
    userPermissions: React.PropTypes.array.isRequired, 
    requiredPermissions: React.PropTypes.array.isRequired, 
    children: React.PropTypes.node.isRequired 
    }, 

    isAllowed() { 
    const { userPermissions, requiredPermissions } = this.props; 
    return requiredPermissions.some((requiredPermission) => { 
     return userPermissions.some((userPermission) => { 
     // If this ever returns true, isAllowed will return true 
     // Meaning: If any of the requiredPermissions match 
     // any of the userPermissions 
     return requiredPermission === userPermission; 
     }); 
    }); 
    }, 

    render { 
    if(!this.isAllowed()) return null; 
    return this.props.children; 
    }; 
}); 

const mapStateToProps = (state) => { 
    // Only this auth component has access to state 
    return { 
    userPermissions: state.userPermissions 
    }; 
}; 

export default connect(
    mapStateToProps, 
    null 
)(AuthWrapper); 

：

あなたがまたは多分あなたは、このような何かを行う権限に基づいてその子をレンダリングすべきでないものを周りに置くことができラッパーコンポーネントをしたい場合このラッパーは次のように使用できます：

// Inside some component 
render { 
    return (
    <MyApp> 
     <NormalFeature /> 
     <AuthWrapper requiredPermissions=['secretFeature', 'betaTolerant']> 
     <SecretFeature /> 
     </AuthWrapper> 
    </MyApp> 
); 
}