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

  • 11 – Working With 反应Props

    课程清单

    在上一课中,我们了解了如何输出动态内容,从而使我们的组件可配置,灵活和动态。

    反应Props

    For normal HTML elements we can pass attributes like className which we can add to any HTML attribue and in input element we have value attribute for example now for Person

    src / App.js
    
    import React, { Component } from 'react';
    import './App.css';
    import Person from './Person/Person';
    class App extends Component {
    	render() {
    		return (
    			<div className="App">
    				<h1> Heading</h1>
    				<p> Paragraph </p>
    				{/* Setting Attribute */}
    				<Person name="Lucy" age="23" />
    				<Person name="最高" age="12">
               My Hobbies : Dancing {/* Some Additional Data */}
    				</Person>
    				<Person name="Mike" age="34" />
    			</div>
    		);
    	}
    }
    export 默认 App;
    

    因此,如果我们想输出此数据,也许我们希望永远接受它, 最高 we also Adding some extra data i.e hobby. Now all that in place we have to change somthing in our Person component to handle data input.

    Using 反应Props

    The Person component can take the attribute and give us access inside our receiving component on object named props.

    src / Person / Person.js
    
    import 反应from 'react';
    const person = (props) => {
    	return <p></p>;
    };
    export 默认 person;
    

    Now actually the name props is up to you but you will receive one argument in you function. One argument which is passed into it by 默认 by 反应which is an object with all the properties of this component.

    注意物产 表示您在组件上添加的属性。

    Now in react land this is reffered to as prop which is why I Named this argument props and i strongly recommend doing so, so that everyone else understand your code.

    所以

    Now, that we have props we can get access to that name and age thing. So we can use in our Person component

    src / Person / Person.js
    
      import 反应from 'react';
      const person = props => {
      	return (
      		<p>
      			I am a {props.name} and i am {props.age} year old!
      		</p>
      	);
      };
      export 默认 person;
    
    注意 :
    In case if you are using the class-based component accessing the props will be like :
    src / Person / Person.js
    
    class Person extends Component{
        render(){
            return (
                <p>
                    I am a {this.props.name} and i am {this.props.age} year old!
                </p>
            );
        }
    }
    

    保存代码后,您可以在浏览器上检查我们定义的属性是否已在段落中绑定。
    因此,现在我们有了一个具有明确定义的组件的可重用组件,但是在该组件中,我们使用了动态内容,这些内容是在我们实际使用组件的地方从外部设置的,这使得它真正可重用。
    Think about all the possibilities which we will also explore in the course. having an input component where you can set the type from outside. having this Person component which might be styled like a card to output dynamic or different content for the different presence.
    这是一个实际上令人称奇的功能世界,我们可以在这里使用它,这是重建强大灵活组件的重要一步。

    那兴趣爱好呢?

    我们在内部提到的兴趣爱好 最高 人的组成部分。
    让我们看一下如何使用内容,而不是作为属性传递,而是在下一课的开始和结束文本之间传递。

    反应introduction
    反应Component
    反应Props
  • 启用通知    不用了,谢谢