×
  • 反应– The Complete Guide (incl. 反应Router 4 & Redux)

  • 17 –组件之间传递方法参考

    课程清单

    So let’s say we can to call switchNameHandler that not when clicking button from App.js, but also say when clicking on paragraph in the /person/Person.js in which contains name and age.
    Now for that inside a Person component we could add onClick={}, but we cant call that switchNameHandler method in a different file in a different class.

    组件之间传递方法参考

    Well we can actually pass the refrence to the switchNameHandler as a property to our Person component and this is no fancy hack, this is actually a very common pattern.

    src / App.js
    
    ...
    <Person
    	click={this.switchNameHandler}
    	name={this.state.persons[1].name}
    	age={this.state.persons[1].age}
    />
    ...
    

    So in Person component we will add a new property name click the name is totally up to you. there we will pass a reference to this.switchNameHandler, similarly as we did for button in our previous lesson. the difference is in Person component we are passing as property and now we can use this click property Person.js 文件。

    src / Person / Person.js
    
    import 反应from 'react';
    const person = props => {
    	return (
    		<div>
    			<p onClick={props.click}>
    				I am a {props.name} and i am {props.age} year old!{' '}
    			</p>
    			<p> {props.children} </p>
    		</div>
    	);
    };
    export 默认 person;
    

    Person.js we can simply call props.click because click is the name of the property defined in App.js, And that will execute the switchNameHandler function which we pass as a reference.
    然后,如果我们保存所有文件并在浏览器中签入,则可以单击“查看段落”,即更改了数据。

    注意:
    了解重要模式的一些重要知识,您还可以将方法作为道具传递,以便可以调用可能会更改另一个组件中的状态的方法,而该组件不能直接访问该状态,而不能直接访问该状态。

    So, it is a common pattern san it is important to know that you can pass down click handlers which allows you to change data in the Parent component. 在 the app component.


    在 case if the method i.e. switchNameHandler accepts an argument like we want to pass a value to our function.

    src / App.js
    
      switchNameHandler = (newName) => {
     		this.setState({
     			persons: [{ name: 'Lucy Stifert', age: 23 }, { name: newName, age: 12 }, { name: 'Mike', age: 34 }],
     		});
     	};
    

    so we will receive a newName in our switchNameHandler() function. so where we earlier hardcoded the name at that we can set name = newName.
    现在的问题是 我们如何传递数据?
    有两种方法可以做到这一点。
    1) { this.switchNameHandler.bind(this, 'NewName') } : the first argument this is a list of arguments actually which will be passed into our function. and the second argument will be the new name.
    2) { () => this.switchNameHandler() }: this get return switchNameHandler function i.e a function call that is why we have added parentheses. 在 earlier lesson as I mention that you should not call this and that was true but here its not getting executed immediately. instade what we pass here is an anonymous function
    单击将执行该操作,然后返回执行该函数的结果。

    ES6注意:
    the arrow function this implicitly adds a return in front of the code i.e. () => return this.switchNameHandler() which comes directly after the arrow if its all written in one line.
    反应introduction
    反应Component
    组件之间传递方法参考
  • 启用通知    不用了,谢谢