在我的组件中,我如何访问嵌套在其中的父组件的名称？
所以如果我的渲染是这样的：
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"));
