react怎么使用props?

在开发过程中,经常会遇到父组件和子组件之间相互通信,React子组件和父组件通信包括以下几个方面:

1,子组件调用父组件的方法

(1)子组件要拿到父组件的属性,需要通过 this.props 方法。

(2)同样地,如果子组件想要调用父组件的方法,只需父组件把要被调用的方法以属性的方式放在子组件上,

子组件内部便可以通过“this.props.被调用的方法”这样的方式来获取父组件传过来的方法。

2,父组件调用子组件的方法

在 ReactJS 中有个叫 ref 的属性。这个属性就像给组件起个引用名字一样,子组件被设置为 ref 之后(比如 ref=“xxx”)。父组件便可以通过 this.refs.xxx 来获取到子组件了。

子组件向父组件传值

  • 子组件通过this.props.fun 使用父组件的方法
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>React 实例</title>
<script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script>
<script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script>
<script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
</head>
<body>
<div id="example"></div>

<script type="text/babel">


class Child extends React.Component {

    render() {
        return (
            <div>
            请输入邮箱:<input onChange={this.props.handleEmail}/>
            </div>
        );
    }
}

 

class Parent extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            email: ' '
        }
    }

    handleEmail = (event) => {
        this.setState({
            email: event.target.value
        });
    }

    render() {
        return (
            <div>
            <div>用户邮箱:{this.state.email}</div>
            <Child name="email" handleEmail={this.handleEmail}/>
            </div>
        );
    }
}
ReactDOM.render(
    <Parent />,
    document.getElementById('example')
);


</script>

</body>
</html>

子组件部分处理

  • 有时候往往需要对数据做处理,再传给父组件,比如过滤或者自动补全等等,下面的例子对用户输入的邮箱做简单验证,自动过滤非数字、字母和"@."以外的字符。
    效果图
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>React 实例</title>
<script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script>
<script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script>
<script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
</head>
<body>
<div id="example"></div>

<script type="text/babel">
class Child extends React.Component {

    handleVal = () => { 
        var val = this.refs.emailDom.value;
        val = val.replace(/[^0-9|a-z|\@|\.]/ig,"");
        this.props.handleEmail(val);
    }

    render() {
        return (
            <div>
            请输入邮箱:<input ref="emailDom" onChange={this.handleVal}/>
            </div>
        );
    }
}

// 父类 - Parent
class Parent extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            email: 'ddd'
        }
    }

    handleEmail = (value) => {
        this.setState({
            email: value
        });
    }

    render() {
        return (
            <div>
                <div>用户邮箱:{this.state.email}</div>
                <Child name="email" handleEmail={this.handleEmail}/>
            </div>
        );
    }
}

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

</script>

</body>
</html>

多级的传递

  • 如果还存在孙子组件的情况呢?如下图,黑框为父,绿框为子,红框为孙,要求子孙的数据都传给爷爷。原理一样的,只是父要将爷爷对孙子的处理函数直接传下去。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>React 实例</title>
<script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script>
<script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script>
<script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
</head>
<body>
<div id="example"></div>

<script type="text/babel">

class Grandson extends React.Component {
  render() {
    return (
      <div>性别:
        <select onChange={this.props.handleSelect}>
          <option value="男">男</option>
          <option value="女">女</option>
        </select>
      </div>
    );
  }
}

class Child extends React.Component {

  render() {
    return (
      <div>
        姓名:<input onChange={this.props.handleVal}/>
        <Grandson handleSelect={this.props.handleSelect}/>
      </div>
    );
  }
}

class Parent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      username: '',
      sex: ''
    }
  }

  handleVal = (event) => {
    this.setState({
      username: event.target.value
    });
  }

  handleSelect = (event) => {
    this.setState({
      sex: event.target.value
    });
  }

  render() {

    return (
      <div>
        <div>用户姓名:{this.state.username}</div>
        <div>用户性别:{this.state.sex}</div>
        <Child handleVal={this.handleVal} handleSelect={this.handleSelect}/>
      </div>
    );
  }
}

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


</script>

</body>
</html>

父类调用子类的函数和属性

  • 通过refs获取
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>React 实例</title>
<script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script>
<script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script>
<script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
</head>
<body>
<div id="example"></div>

<script type="text/babel">
class ButtonComment extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      count: 0
    }
  }

  sendSword = () => {
    var newCount = this.state.count + 1;
    this.setState({
      count: this.state.count + 1
    });
    this.props.getSwordCount();
  }

  render() {
    return (
      <button onClick={this.sendSword}>{this.props.buttonName}</button>
    );
  }
}
// 父类
class ImDaddyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      sendCount: 0
    }



  }


  getSwordCount = () => {
    this.setState({sendCount:this.refs.getSwordButton.state.count + 1});
  }

  sendSword = () => {
    console.log(this.refs);

    this.refs.getSwordButton.sendSword();
  }

  render() {
 
    return (
      <div>
        <ButtonComment ref="getSwordButton" getSwordCount={this.getSwordCount} buttonName="儿子送宝刀"/>
        <button onClick={this.sendSword}>通过老爸送宝刀</button>
        <p>
          父子俩共送{this.state.sendCount}把宝刀!!!
        </p>
      </div>
    );
  }
}


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

</body>
</html>

想要了解更多相关知识,可访问 前端学习网站!!

以上就是react怎么使用props?的详细内容,更多请关注web前端其它相关文章!

赞(0) 打赏
未经允许不得转载:web前端首页 » React 答疑

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

前端开发相关广告投放 更专业 更精准

联系我们

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏