Bagaimana cara mengakses metode komponen dari "luar" di ReactJS?

Mengapa saya tidak bisa mengakses metode komponen dari "luar" di ReactJS? Mengapa itu tidak mungkin dan apakah ada cara untuk menyelesaikannya?

Pertimbangkan kodenya:

var Parent = React.createClass({
    render: function() {
        var child = <Child />;
        return (
            <div>
                {child.someMethod()} // expect "bar", got a "not a function" error.
            </div>
        );
    }
});

var Child = React.createClass({
    render: function() {
        return (
            <div>
                foo
            </div>
        );
    },
    someMethod: function() {
        return 'bar';
    }
});

React.renderComponent(<Parent />, document.body);

Bereaksi menyediakan antarmuka untuk apa yang Anda coba lakukan melalui refatribut . Tetapkan komponen a ref, dan currentatributnya akan menjadi komponen khusus Anda:

class Parent extends React.Class {
    constructor(props) {
        this._child = React.createRef();
    }

    componentDidMount() {
        console.log(this._child.current.someMethod()); // Prints 'bar'
    }

    render() {
        return (
            <div>
                <Child ref={this._child} />
            </div>
        );
    }
}

Catatan : Ini hanya akan berfungsi jika komponen anak dinyatakan sebagai kelas, sesuai dokumentasi yang ditemukan di sini: https://facebook.github.io/react/docs/refs-and-the-dom.html#adding-a- ref-to-a-class-komponen

Pembaruan 2019-04-01: Contoh yang diubah untuk menggunakan kelas dan createRefper dokumen Bereaksi terbaru.

Update 2016/09/19: contoh Berubah menggunakan callback ref per bimbingan dari para refatribut String docs.

Jika Anda ingin memanggil fungsi pada komponen dari luar Bereaksi, Anda dapat memanggil mereka pada nilai balik dari renderComponent:

var Child = React.createClass({…});
var myChild = React.renderComponent(Child);
myChild.someMethod();

Satu-satunya cara untuk mendapatkan pegangan ke instance Komponen Bereaksi di luar Bereaksi adalah dengan menyimpan nilai pengembalian React.renderComponent. Sumber .

Atau, jika metode pada Child benar-benar statis (bukan produk dari alat peraga saat ini, nyatakan) Anda dapat mendefinisikannya staticsdan kemudian mengaksesnya seperti halnya Anda menggunakan metode kelas statis. Sebagai contoh:

var Child = React.createClass({
  statics: {
    someMethod: function() {
      return 'bar';
    }
  },
  // ...
});

console.log(Child.someMethod()) // bar

Pada React 16.3 React.createRefdapat digunakan, (digunakan ref.currentuntuk mengakses)

var ref = React.createRef()

var parent = <div><Child ref={ref} /> <button onClick={e=>console.log(ref.current)}</div>

React.renderComponent(parent, document.body)

Sejak Bereaksi 0.12 API sedikit berubah . Kode yang valid untuk menginisialisasi myChild adalah sebagai berikut:

var Child = React.createClass({…});
var myChild = React.render(React.createElement(Child, {}), mountNode);
myChild.someMethod();

Anda juga bisa melakukannya seperti ini, tidak yakin apakah itu rencana yang bagus: D

class Parent extends Component {
  handleClick() {
    if (this._getAlert !== null) {
      this._getAlert()
    }
  }

  render() {
    return (
      <div>
        <Child>
        {(getAlert, childScope) => (
          <span> {!this._getAlert ? this._getAlert = getAlert.bind(childScope) : null}</span>
        )}
        </Child>
        <button onClick={() => this.handleClick()}> Click me</button>
      </div>
      );
    }
  }

class Child extends Component {
  constructor() {
    super();
    this.state = { count: 0 }
  }

  getAlert() {
    alert(`Child function called state: ${this.state.count}`);
    this.setState({ count: this.state.count + 1 });
  }

  render() {
    return this.props.children(this.getAlert, this)
  }
}

Seperti yang disebutkan dalam beberapa komentar, ReactDOM.rendertidak lagi mengembalikan instance komponen. Anda dapat meneruskan refpanggilan balik ketika merender root komponen untuk mendapatkan instance, seperti:

// React code (jsx)
function MyWidget(el, refCb) {
    ReactDOM.render(<MyComponent ref={refCb} />, el);
}
export default MyWidget;

dan:

// vanilla javascript code
var global_widget_instance;

MyApp.MyWidget(document.getElementById('my_container'), function(widget) {
    global_widget_instance = widget;
});

global_widget_instance.myCoolMethod();

Cara lain sangat mudah:

fungsi di luar:

function funx(functionEvents, params) {
  console.log("events of funx function: ", functionEvents);
  console.log("this of component: ", this);
  console.log("params: ", params);
  thisFunction.persist();
}

Ikatkan itu:

constructor(props) {
   super(props);
    this.state = {};
    this.funxBinded = funx.bind(this);
  }
}

Silakan lihat tutorial lengkap di sini: Cara menggunakan "ini" dari Komponen Bereaksi dari luar?