Réagir, obtenir le nom de l'élément DOM parent lié dans le composant

, Il fait probablement le plus de sens pour passer comme une propriété, mais si vous vraiment besoin de l'obtenir par programmation, et à partir de dans le composant, vous pouvez attendre que le composant de montage, trouver son nœud DOM, et puis regarder son parent.

Voici un exemple:

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"));

Démo de travail: https://jsbin.com/yayepa/1/edit?html,js, sortie

Si vous faites cela, beaucoup, ou si vous voulez être vraiment fantaisie, vous pourriez utiliser un ordre supérieur composant:

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>
}

Ici withContainerId est une fonction qui prend un argument appelé property et retourne une nouvelle fonction. Cette fonction peut prendre un type de composant comme seul argument et renvoie un composant d'ordre supérieur. Une fois rendu, le nouveau composant rendra le composantpassé , avec tous ses accessoires d'origine, plus un accessoire supplémentaire spécifiant L'ID du conteneur parent sur la propriété spécifiée par l'argument property.

Vous pouvez les utiliser avec les décorateurs ES7 (comme actuellement implémenté) si vous le souhaitez, ou via un appel de fonction régulier:

@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"));

Démo de travail: https://jsbin.com/zozumi/edit?html,js, sortie