ReactJS_05 React Props

props与state的区别

props是不可变的，不能被其所在的组件修改，从父组件传递进来的属性不会在组件内部更改；state可以根据与用户交互来改变，但只能在所在组件内部更改，或在外部调用setState函数对状态进行间接修改。
这就是为什么有些容器组件需要定义** state** 来更新和修改数据。 而子组件只能通过 props 来传递数据。

使用 Props

演示如何在组件中使用props：

function HelloMessage(props) {
    return <h1>Hello {props.name}!</h1>;
}
 
const element = <HelloMessage name="Runoob"/>;
 
ReactDOM.render(
    element,
    document.getElementById('example')
);

实例中name 属性通过 this.props.name来获取。

默认 Props

可以通过组件类的 defaultProps属性为props设置默认值，实例如下：

class HelloMessage extends React.Component {
  render() {
    return (
      <h1>Hello, {this.props.name}</h1>
    );
  }
}
 
HelloMessage.defaultProps = {
  name: 'Runoob'
};
 
const element = <HelloMessage/>;
 
ReactDOM.render(
  element,
  document.getElementById('example')
);

State 和 Props组合使用

class WebSite extends React.Component {
        constructor() {
            super();
            this.state = {
                name: "React Props教程",
                site: "https://www.jianshu.com/writer#/notebooks/29971130/notes/34751898/preview"
            }
        }
        render() {
            return (
                <div>
                    <Name name={this.state.name} />
                    <Link site={this.state.site} />
                </div>
            );
        }
    }

    class Name extends React.Component {
        render() {
            return (
                <h1>{this.props.name}</h1>
            );
        }
    }

    class Link extends React.Component {
        render() {
            return (
                <a href={this.props.site}>
                    {this.props.site}
                </a>
            );
        }
    }

    ReactDOM.render(
        <WebSite />,
        document.getElementById('box')
    );

运行结果：