reactjs, comment passer les accessoires au niveau de la classe

Question

Ceci est un exemple de ce que j'essaie de faire. Je veux passer dans les accessoires de la classe MyComponent, sans utiliser <MyComponent hello={'Hello World'}/>, parce que je passe MyComponent à d'autres bibliothèques.

import React, { Component } from 'react'; 

class MyComponent extends Component { 
    render() { 
    const { hello } = this.props; 
    return (
     <div>{hello}</div> 
    ); 
    } 
} 

// this line is wrong 
MyComponent.props = { 
    hello: 'Hello World!' 
} 

<MyComponent /> 

Comment est-réagir Redux se connecter à ajouter this.props.state et la carte toute autre fonction aux accessoires du composant? Je veux injecter mes objets personnalisés dans un composant.

Answer 1

Vous devez créer un Higher Order Component

function withMyObject(WrappedComponent,helloText) { 
    return class extends React.Component { 

    render() { 
     return <WrappedComponent {...this.props} hello={helloText} />; 
    } 
    }; 
} 

Utilisation:

UpdatedComponent = withMyObject(ComponentToBeWrapped,"Hello"); 

Answer 2

Vous pouvez définir des accessoires par défaut. Je pense que c'est une bonne pratique.

import React, { Component } from 'react'; 

class MyComponent extends Component { 
    render() { 
    const { hello } = this.props; 
    return (
     <div>{hello}</div> 
    ); 
    }headerProp: "Header from props...", 
    contentProp:"Content from props..." 
} 

MyComponent.defaultProps = { 
    hello: 'Hello World!' 
} 

<MyComponent />