web-dev-qa-db-fra.com

Réagissez, obtenez le nom de l'élément dom parent lié dans le composant

Dans mon composant, comment puis-je accéder au nom du composant parent dans lequel il est imbriqué?

Donc si mon rendu est ainsi:

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

Comment récupérer le id nom #radials-1 de l'intérieur du composant lui-même?

domreactjscomponentsparent-child
23
Learning stats by example

Il est probablement plus judicieux de le passer en tant que propriété, mais si vous vraiment devez l'obtenir par programme, et à partir de à l'intérieur du composant, vous pouvez attendre que le composant soit monté, trouver son nœud DOM, 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,output

Si vous faites beaucoup cela ou si vous voulez être vraiment fantaisiste, vous pouvez utiliser un composant d'ordre supérieur:

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 renvoie 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 composant passé , 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 mis en œuvre) 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,output

45
Michelle Tilley