反应,在组件内获取绑定的父dom元素名称

概述在我的组件中,我如何访问嵌套在其中的父组件的名称？ 所以如果我的渲染是这样的： ReactDOM.render( <RadialsDisplay data={imagedata}/>, document.getElementById('radials-1')); 如何从组件本身检索id名称#radials-1？ 将其作为属性传递可能是最有意义的,但是如果您真的需要以编程方 在我的组件中,我如何访问嵌套在其中的父组件的名称？

所以如果我的渲染是这样的：

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

如何从组件本身检索ID名称#radials-1？

解决方法 将其作为属性传递可能是最有意义的,但是如果您真的需要以编程方式获取它,并且从组件内部,您可以等待组件挂载,找到其DOM节点,然后查看其父级.

以下是一个例子：

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

工作演示：https://jsbin.com/yayepa/1/edit?html,output

如果你这样做很多,或者想要真的很喜欢,你可以使用更高级的组件：

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

这里,withContainerID是一个函数,它接受一个名为property的参数,并返回一个新的函数.此函数可以将组件类型作为其唯一参数,并返回高阶组件.渲染时,新组件将渲染所有原始道具的传递组件,以及指定属性参数指定的属性上的父容器ID的附加实例.

您可以使用它们与ES7装饰器(如现在实现的),如果你愿意,或通过常规的函数调用：

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

工作演示：https://jsbin.com/zozumi/edit?html,output

总结

以上是内存溢出为你收集整理的反应,在组件内获取绑定的父dom元素名称全部内容，希望文章能够帮你解决反应,在组件内获取绑定的父dom元素名称所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。