Javascript 在 React Native 中将参数传递给组件

Passing Parameters to Components in React Native

提问by Nimila Hiranya

I'm trying to use a common Navigation Component I made in React-Native. At the point of calling I want to set the Navigation Bar Tint, Title etc.

我正在尝试使用我在 React-Native 中制作的通用导航组件。在调用时，我想设置导航栏色调、标题等。

Nav Bar Code:

导航条码：

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

Applying it on another page:

在另一个页面上应用它：

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

How to do this properly? Thanks in advance.

如何正确地做到这一点？提前致谢。

回答by Henrik Andersson

First off renderdoes not take any parameters, what you want to do is to reference your props that you passed in.

首先render不带任何参数，您要做的是引用您传入的道具。

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

Just by doing this, whenever your NavigationBarrerenders so will the NavBarcomponent too.

只要这样做，每当您重新NavigationBar渲染时，NavBar组件也会如此。

A super simple example demonstrating this

一个超级简单的例子证明了这一点

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

回答by Kartikeya Sharma

You Can call the Navigation bar component and giving the props like this

您可以调用导航栏组件并提供这样的道具

let inputProps={
   color:"blue",
   title:"Title"
};
<NavigationBar props={inputProps}/>

And in the declaration of NavigationBar you can use it like this

在 NavigationBar 的声明中，您可以像这样使用它

const NavigationBar = (props)=>{
    const [title,setTitle] = useState("");
    const [color,setColor] = useState("");
    useEffect(()=>{
        setColor(props.color);
        setTitle(props.title);
    },[props.color,props.title]);
    return(
        <NavBar
            title={title}
            tintColor={color}
            leftButton={<Button style={styles.menuButton}>&#xf0c9;</Button>}
            rightButton={
                <Button style={styles.menuButton}>&#xf07a;</Button>}
             />
    );
}

As your the color and the title changes the effect hook will trigger and update the state of the title and color using the state hook which will force the component to re-render with updated values.So its one way binding giving you a flavour of two way binding.

当您的颜色和标题更改时，效果钩子将触发并使用状态钩子更新标题和颜色的状态，这将强制组件使用更新的值重新呈现。因此，它的一种绑定方式为您提供了两种风格方式绑定。

回答by iPragmatech

The renderis a non-parametrised function means it does not take any parameter. So to pass parameters/value from one component to other in React Native we use props. The propsis a JavaScript object that has property to pass on from one component to others. So, you need to pass the values with props.

该渲染是一个非parametrised功能意味着它不带任何参数。因此，为了在 React Native 中将参数/值从一个组件传递到另一个组件，我们使用props。的道具是具有属性从一个部件传递给他人JavaScript对象。因此，您需要使用props传递值。