web-dev-qa-db-ja.com

反応し、コンポーネント内のバインドされた親dom要素名を取得します

コンポーネント内で、内部にネストされている親コンポーネントの名前にアクセスするにはどうすればよいですか？

したがって、私のレンダリングがこのようになっている場合：

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

コンポーネント自体からid name #radials-1を取得するにはどうすればよいですか？

domreactjscomponentsparent-child
23
Learning stats by example

おそらくプロパティとして渡すのが最も理にかなっていますが、実際にプログラムで取得する必要があり、inside、コンポーネントがマウントされるのを待ち、その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,js,output

これを何度も行う場合、またはreallyファンシーにしたい場合は、高次のコンポーネントを利用できます。

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と呼ばれる引数を取り、新しい関数を返す関数です。この関数は、唯一の引数としてコンポーネントタイプを取り、高次のコンポーネントを返します。レンダリングされると、新しいコンポーネントは、passedコンポーネントを、そのすべての元の小道具に加えて、指定されたプロパティで親コンテナのIDを指定する追加の小道具とともにレンダリングしますproperty引数。

必要に応じて、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,js,output

45
Michelle Tilley