tag - Reaccionar, obtener el nombre del elemento dom principal vinculado dentro del componente

title of page html

Question

Dentro de mi componente, ¿cómo puedo acceder al nombre del componente principal en el que está anidado?

Entonces, si mi render es así:

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

¿Cómo puedo recuperar el nombre id #radials-1 desde el propio componente?

Answer 1

Probablemente tenga más sentido pasarlo como una propiedad, pero si realmente necesita obtenerlo mediante programación, y desde el interior del componente, puede esperar a que se monte el componente, encontrar su nodo DOM y luego observar su elemento primario.

Aquí hay un ejemplo:

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

Demostración de trabajo: https://jsbin.com/yayepa/1/edit?html,js,output

Si haces esto mucho o quieres ser realmente elegante, podrías utilizar un componente de orden superior:

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

Aquí, withContainerId es una función que toma un argumento llamado property y devuelve una nueva función. Esta función puede tomar un tipo de componente como su único argumento, y devuelve un componente de orden superior. Cuando se procesa, el nuevo componente representará el componente pasado , con todos sus accesorios originales, más un accesorio adicional que especifica el ID del contenedor padre en la propiedad especificada por el argumento de property .

Puede usarlos con decoradores de ES7 (como se implementa actualmente) si lo desea, o mediante una llamada de función normal:

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

Demostración de trabajo: https://jsbin.com/zozumi/edit?html,js,output