您的位置: 首页  >  IT文章  >  reactjs(四)props的作用

reactjs(四)props的作用

分类: IT文章 • 2023-10-29 07:46:29

记住一句话:渲染一个复合组件时，一定要将两个组件封装在同一个标签内进行渲染。

props用来传递参数。组件实例化过程中，你可以向其中传递一个参数，这个参数会在实例化过程中被引用。

参考下面的例子:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title></title>
    <script src="https://static.runoob.com/assets/react/react-0.14.7/build/react.min.js"></script>
    <script src="https://static.runoob.com/assets/react/react-0.14.7/build/react-dom.min.js"></script>
    <script src="https://static.runoob.com/assets/react/browser.min.js"></script>
  </head>
  <body>
    <div id="example"></div>
    <script type="text/babel">
      var LikeButton = React.createClass({
        getInitialState: function() {
          return {liked: false};
        },
        handleClick: function(event) {
          this.setState({liked:!this.state.liked});
        },
        render: function() {
        var text = this.state.liked?"yellow":"blue";
        var style = {
            color:text
        }
          return (
            <p onClick={this.handleClick} style={style}>
                我是{this.props.name},不是"齐天大圣"//{this.props.name}接收名称叫name的参数
            </p>
          );
        }
      });

      React.render(
        <LikeButton name="七天大圣"/>,//在组件实例化过程中传递一个名称叫name的参数。
        document.getElementById('example')
      );
    </script>
  </body>
</html>

props相当于一个对象，传递的参数保存到这个对象里面。我们也可以给这个对象添加一些固定参数，可以在组件内直接引用。

可以通过在 getDefaultProps() 方法在构建组件的过程中为 props 设置默认值

var Message = React.createClass({
  getDefaultProps: function() {
    return {
      name: '齐天大圣'
    };
  },
  render: function() {
    return <h1>Hello {this.props.name}</h1>;
  }
});

ReactDOM.render(
  <HelloMessage />,
  document.getElementById('example')
);

相关推荐