reactjs(四)props的作用

最新推荐文章于 2024-03-28 14:33:07 发布

躺屋顶看月亮

最新推荐文章于 2024-03-28 14:33:07 发布

阅读量1.8k

点赞数

分类专栏： react-js 文章标签： reactjs props

本文链接：https://blog.csdn.net/liuxuan12417/article/details/54096411

版权

react-js 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

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

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

躺屋顶看月亮

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
reactjs(四)props的作用

props用来传递参数。组件实例化过程中，你可以向其中传递一个参数，这个参数会在实例化过程中被引用。参考下面的例子:<!DOCTYPE html><html> <head> <meta charset="UTF-8" /> <title></title> <script src="https://static.runoob.com/assets/react/react-
复制链接

扫一扫