小编典典

ReactJS 调用父方法

all

我正在迈出 ReactJS 的第一步，并试图理解父母和孩子之间的沟通。我正在制作表格，所以我有样式字段的组件。而且我还有包含字段并检查它的父组件。例子：

var LoginField = React.createClass({
    render: function() {
        return (
            <MyField icon="user_icon" placeholder="Nickname" />
        );
    },
    check: function () {
        console.log ("aakmslkanslkc");
    }
})

var MyField = React.createClass({
    render: function() {
...
    },
    handleChange: function(event) {
//call parent!
    }
})

有没有办法做到这一点。我的逻辑在 reactjs“世界”中是否很好？谢谢你的时间。

阅读 73

2022-08-27

共1个答案

小编典典

2019 年 React 16+ 和 ES6 更新

React.createClass从 react 版本 16开始不推荐发布此内容，新的 Javascript ES6 将为您带来更多好处。

家长

import React, {Component} from 'react';
import Child from './Child';

export default class Parent extends Component {

  es6Function = (value) => {
    console.log(value)
  }

  simplifiedFunction (value) {
    console.log(value)
  }

  render () {
  return (
    <div>
    <Child
          es6Function = {this.es6Function}
          simplifiedFunction = {this.simplifiedFunction} 
        />
    </div>
    )
  }

}

孩子

import React, {Component} from 'react';

export default class Child extends Component {

  render () {
  return (
    <div>
    <h1 onClick= { () =>
            this.props.simplifiedFunction(<SomethingThatYouWantToPassIn>)
          }
        > Something</h1>
    </div>
    )
  }
}

将无状态子简化为 ES6 常量

import React from 'react';

const Child = (props) => {
  return (
    <div>
    <h1 onClick= { () =>
        props.es6Function(<SomethingThatYouWantToPassIn>)
      }
      > Something</h1>
    </div>
  )

}
export default Child;

2022-08-27