có cách nào để truy cập cá thể thành phần gốc trong React không?

Question

Tôi biết nó không phải là một phương pháp chức năng để có thể làm một cái gì đó như this.parent trong một thành phần React, và tôi dường như không tìm thấy bất kỳ thuộc tính nào trên thể hiện thành phần React dẫn đến cha mẹ, nhưng tôi chỉ có thể làm một số thứ tùy chỉnh nơi tôi cần.

Trước khi bất cứ ai lãng phí thời gian của họ giải thích đó không phải là chức năng Phản ứng "bằng cách nào," hiểu rằng tôi cần điều này vì những điều sau đây tôi đang cố gắng để đạt được:

Xây dựng một transpiler cho Spacebars Meteor của động cơ templating, mà mô hình kết xuất sẽ xem xét các thành phần/mẫu của cha mẹ.

Tôi đã xây dựng một trình thu thập thông tin để sửa đổi kết xuất jsx để đạt được điều này. Tôi làm điều này bằng cách đi qua trong parent={this} trong tất cả các thành phần con được sáng tác. Tuy nhiên, sau khi thực tế nó xảy ra với tôi rằng có lẽ tôi chỉ đơn giản là không biết một cái gì đó sẽ cho tôi một cách để truy cập vào các thành phần cha mẹ dụ mà không cần sửa đổi bổ sung transpilation.

Mọi mẹo sẽ được đánh giá cao.

Answer 1

Cập nhật cho Phản ứng 0,13 và mới hơn

Component._owner đã bị phản đối trong Phản ứng 0,13, và _currentElement không còn tồn tại như một chìa khóa trong this._reactInternalInstance. Do đó, sử dụng giải pháp dưới đây ném Uncaught TypeError: Cannot read property '_owner' of undefined.

Cách khác là, theo React 16, this._reactInternalFiber._debugOwner.stateNode.

---

Bạn đã nhận ra rằng đây không phải là một điều tốt để làm hầu như mọi khi, nhưng tôi lặp đi lặp lại nó ở đây cho mọi người mà không đọc những câu hỏi rất tốt: này thường là một cách không đúng cách để hoàn thành công việc trong React.

Không có gì trong số API công khai API này sẽ cho phép bạn nhận được những gì bạn muốn. Bạn có thể nhận được điều này bằng cách sử dụng nội bộ React, nhưng bởi vì nó là một API riêng, nó chịu trách nhiệm phá vỡ tại bất cứ lúc nào.

Tôi lặp lại: bạn gần như chắc chắn không sử dụng điều này trong bất kỳ loại mã sản xuất nào.

Điều đó nói rằng, bạn có thể lấy phiên bản nội bộ của thành phần hiện tại bằng cách sử dụng this. _reactInternalInstance. Tại đó, bạn có thể truy cập phần tử qua thuộc tính _currentElement và sau đó là chủ sở hữu chủ sở hữu qua _owner._instance.

Dưới đây là một ví dụ:

var Parent = React.createClass({ 
    render() { 
     return <Child v="test" />; 
    }, 

    doAThing() { 
    console.log("I'm the parent, doing a thing.", this.props.testing); 
    } 
}); 

var Child = React.createClass({ 
    render() { 
    return <button onClick={this.onClick}>{this.props.v}</button> 
    }, 

    onClick() { 
    var parent = this._reactInternalInstance._currentElement._owner._instance; 
    console.log("parent:", parent); 
    parent.doAThing(); 
    } 
}); 

ReactDOM.render(<Parent testing={true} />, container); 

Và đây là a working JSFiddle example: http://jsfiddle.net/BinaryMuse/j8uaq85e/

Answer 2

Có gì sai nếu bạn cần truy cập vào đạo cụ và chức năng của cha mẹ từ những đứa trẻ.

Vấn đề là bạn không bao giờ nên sử dụng nội bộ React và API không có giấy tờ.

Trước hết, chúng có thể thay đổi (vi phạm mã của bạn) và quan trọng nhất là có nhiều cách tiếp cận khác sạch hơn.

Đi qua đạo cụ để trẻ em

class Parent extends React.Component { 

    constructor(props) { 
     super(props) 

     this.fn = this.fn.bind(this) 
    } 

    fn() { 
     console.log('parent') 
    } 

    render() { 
     return <Child fn={this.fn} /> 
    } 

} 

const Child = ({ fn }) => <button onClick={fn}>Click me!</button> 

Working example

Sử dụng ngữ cảnh (nếu không có cha mẹ trực tiếp/mối quan hệ con)

class Parent extends React.Component { 

    constructor(props) { 
     super(props) 

     this.fn = this.fn.bind(this) 
    } 

    getChildContext() { 
     return { 
      fn: this.fn, 
     } 
    } 

    fn() { 
     console.log('parent') 
    } 

    render() { 
     return <Child fn={this.fn} /> 
    } 

} 

Parent.childContextTypes = { 
    fn: React.PropTypes.func, 
} 

const Child = (props, { fn }) => <button onClick={fn}>Click me!</button> 

Child.contextTypes = { 
    fn: React.PropTypes.func, 
} 

Working example