Reagieren, gebundener Elterndom-Elementname innerhalb der Komponente erhalten

Question

Wie kann ich innerhalb meiner Komponente auf den Namen der übergeordneten Komponente zugreifen, in der sie verschachtelt ist?

Also, wenn meine machen ist also:

ReactDOM.render(
     <RadialsDisplay data={imagedata}/>, 
     document.getElementById('radials-1') 
); 

Wie kann ich den Namen id#radials-1 aus der Komponente selbst abrufen?

Answer 1

Es macht wohl am meisten Sinn es als Eigentum zu übergeben, aber wenn man wirklich braucht es programmatisch zu bekommen, und von innerhalb die Komponente, können Sie warten, bis die Komponente zu montieren, dessen DOM-Knoten finden und dann auf sein Elternteil schauen.

Hier ist ein Beispiel:

class Application extends React.Component { 
    constructor() { 
    super(); 
    this.state = { containerId: "" }; 
    } 

    componentDidMount() { 
    this.setState({ 
     containerId: ReactDOM.findDOMNode(this).parentNode.getAttribute("id") 
    }); 
    } 

    render() { 
    return <div>My container's ID is: {this.state.containerId}</div>; 
    } 
} 

ReactDOM.render(<Application />, document.getElementById("react-app-container")); 

Arbeits Demo: https://jsbin.com/yayepa/1/edit?html,js,output

---

Wenn Sie diese viel zu tun, oder wollen wirklich Phantasie sein, Sie eine höhere Ordnung Komponente nutzen könnte :

class ContainerIdDetector extends React.Component { 
    constructor() { 
    super(); 
    this.state = { containerId: "" }; 
    } 

    componentDidMount() { 
    this.setState({ 
     containerId: ReactDOM.findDOMNode(this).parentNode.getAttribute("id") 
    }); 
    } 

    render() { 
    if (!this.state.containerId) { 
     return <span />; 
    } else { 
     return React.cloneElement(
     React.Children.only(this.props.children), 
     { [this.props.property]: this.state.containerId } 
    ); 
    } 
    } 
} 

ContainerIdDetector.propTypes = { 
    property: React.PropTypes.string.isRequired 
} 

// Takes an optional property name `property` and returns a function. This 
// returned function takes a component class and returns a new one 
// that, when rendered, automatically receives the ID of its parent 
// DOM node on the property identified by `property`. 
function withContainerId(property = "containerId") { 
    return (Component) => (props) => 
    <ContainerIdDetector property={property}> 
     <Component {...props} /> 
    </ContainerIdDetector> 
} 

Hier, withContainerId ist eine Funktion, die ein Argument namens property annimmt und eine neue Funktion zurückgibt. Diese Funktion kann einen Komponententyp als einziges Argument annehmen und gibt eine Komponente höherer Ordnung zurück. Wenn gerendert, rendert die neue Komponente die übergebene-Komponente mit all ihren ursprünglichen Requisiten sowie eine zusätzliche Stütze, die die ID des übergeordneten Containers in der durch das Argument property angegebenen Eigenschaft angibt.

Sie können sie mit ES7 Dekorateure (wie implementiert) verwenden, wenn Sie möchten, oder über einen regelmäßigen Funktionsaufruf:

@withContainerId() 
class Application extends React.Component { 
    render() { 
    return <div>My containers ID is: {this.props.containerId}</div>; 
    } 
} 

// or, if you don't use decorators: 
// 
// Application = withContainerId()(Application); 

ReactDOM.render(<Application />, document.getElementById("react-app-container")); 

Arbeits Demo: https://jsbin.com/zozumi/edit?html,js,output