web-dev-qa-db-fra.com

Passer des paramètres aux composants dans React Native

J'essaie d'utiliser un composant de navigation commun que j'ai créé dans React-Native. Au moment d'appeler, je veux définir la teinte de la barre de navigation, le titre, etc.

Code à barres de navigation:

var NavigationBar = React.createClass({
    render: function(title, titleColor, NavBarColor) {
        var titleConfig = {
            title: title,
            tintColor: titleColor,
        };

        return (
            <NavBar
                title={titleConfig}
                tintColor={NavBarColor}
                leftButton={<Button style={styles.menuButton}>&#xf0c9;</Button>}
                rightButton={<Button style={styles.menuButton}>&#xf07a;</Button>} />
        );
    }
});

L'application sur une autre page:

<NavigationBar title="Categories" titleColor="#ffffff" NavBarColor="#f0b210"/>

Comment faire ça correctement? Merci d'avance.

javascriptreact-nativereact-jsx
19
Nimila Hiranya

Tout d'abord, render ne prend aucun paramètre, ce que vous voulez faire est de référencer vos accessoires que vous avez passés.

render: function () {
  var titleConfig = {
      title: this.props.title,
      tintColor: this.props.titleColor
  };  
  // Rest of code
}

Juste en faisant cela, chaque fois que votre NavigationBar se rendra aussi le composant NavBar.

Un exemple super simple démontrant cela

var NavBar = React.createClass({
  render: function () {
    return <div id="navbar" style={{backgroundColor: this.props.tintColor}}>
    <h1 style={{color: this.props.title.tintColor}}>{this.props.title.title}</h1>
    </div>;
  }
});

var NavigationBar = React.createClass({
    render: function() {
        var titleConfig = {
            title: this.props.title,
            tintColor: this.props.titleColor,
        };

        return (
            <NavBar
                title={titleConfig}
                tintColor={this.props.NavBarColor}
                />
        );
    }
});


React.render(<NavigationBar title="Categories" titleColor="#ff0" NavBarColor="#f0b210" />, document.body);
26
Henrik Andersson

Vous pouvez appeler le composant Barre de navigation et donner des accessoires comme celui-ci

<NavigationBar title="Hello World" tintColor= "blue" />

Et dans la déclaration de NavigationBar vous pouvez l'utiliser comme ceci

class NavigationBar extends React.Component{
    constructor(props){
     super(props);
        this.state={
           NavTitle:"",
          NavColor:""

         };
      }
    componentDidMount(){
        this.setState({
            NavTitle: this.props.title,
            NavColor:this.props.tintColor
        });
    }
  componentWillRecieveProps(nextProps,nextState){
    this.setState({
     NavTitle:nextProps["title"],
      NavColor:nextProps["tintColor"]
     });

    }
    shouldComponentUpdate(nextProps,nextState){
       // your condition if you want to re-render every time on props change
     return true;
    }
    render() {
        return (
            <NavBar
            title=this.state.NavTitle
            tintColor=this.state.NavColor
            leftButton={<Button style={styles.menuButton}>&#xf0c9;</Button>}
            rightButton={<Button style={styles.menuButton}>&#xf07a;</Button>} />
        );
    }
};

Au fur et à mesure que la couleur et le titre changent, setState force le composant à restituer le composant avec le composant mis à jour. Ainsi, sa liaison unidirectionnelle vous donne une saveur de la liaison bidirectionnelle.

5
Kartikeya Sharma

render est une fonction non paramétrée qui signifie qu'elle ne prend aucun paramètre. Donc, pour passer des paramètres/valeurs d'un composant à un autre dans React Native, nous utilisons props. Le props est un objet JavaScript qui a une propriété pour passer d'un composant à un autre. Donc, vous devez passer les valeurs avec props.

0
iPragmatech