Parametreleri Parametrelere Yeniden Aktarma İçindeki Bileşenlere Geçme

Question

React-Native'de yaptığım ortak bir Gezinme Bileşenini kullanmaya çalışıyorum. çağırma noktada Navigasyon Bar Ton ayarlamak istediğiniz, Başlık vb

Nav Barkod: Başka bir sayfadan uygulamak

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>} /> 
     ); 
    } 
}); 

:

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

düzgün bunu nasıl ? Şimdiden teşekkürler.

Answer 1

Öncelikle render ne yapmak istediğine geçirilen sizin sahne başvuru olduğunu, herhangi bir parametre almaz.

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

Sadece zaman sizin NavigationBar rerenders yüzden olacak NavBar bileşeni de bunu yaparak . işlemek bu

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); 

Answer 2

Navigasyon çubuğu bileşeni çağırabilir ve bu

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

gibi Ve NavigationBar beyanında sahne vererek size renk ve başlık olarak bu

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>} /> 
     ); 
    } 
}; 

gibi kullanabilirsiniz setState değiştirir bileşeni bileşenini güncelleştirilmiş bileşenle yeniden oluşturmaya zorlar. Tek yönlü bağlamanız size iki yönlü bağlamanın bir lezzetini verir.

Answer 3

gösteren

süper basit bir örnek olmayan bir parametreleştirilen işlevi herhangi bir parametre almaz demektir. Yani React Native'de bir bileşenden diğerine parametre/değer aktarmak için sahne kullanın. bölüm, bir bileşenden diğerine aktarılacak özelliği olan bir JavaScript nesnesidir. Yani, değerleri props ile geçirmeniz gerekiyor.