reactjs - ReactJS - 如何从父级创建动态引用。child 是一个功能组件

Question

这是孩子：

import React from 'react';

const Hero = (props) => (
  <div ref={props.heroRef} className={`hero-region ${props.class}`}>
    <h3>{props.copy}</h3>
  </div>
);

export default Hero;

这是父母：

import React, { Component, Fragment } from "react";
import Hero from "./../components/content/Hero";

export default class HomePage extends Component {
  render() {
    const createHeroNodes = () =>
      [
        { class: "light", copy: "first div" },
        { class: "dark", copy: "second div" }
      ].map((hero, i) => (
        <Hero
          heroRef={el => (this[`${heroRegion}${i}`] = el)}
          class={hero.class}
          copy={hero.copy}
        />
      ));

    return <Fragment>{createHeroNodes()}</Fragment>;
  }
}

我希望它能够创建像 this.heroRegion1 和 this.heroRegion2 这样可访问的子引用，这样我就可以在滚动时做一些命令式动画。

我得到的是一个错误：'heroRegion 未定义'

有任何想法吗？我试图避免将 this.heroRegion1 硬编码为 this.heroRegion(...n)。

标签： reactjs

Answer 1

通过${heroRegion}在模板文字中写入，您试图访问一个heroRegion不存在的变量。

您可以heroRegion${i}改为编写它，它会按预期工作。

例子

const Hero = props => (
  <div ref={props.heroRef} className={`hero-region ${props.class}`}>
    <h3>{props.copy}</h3>
  </div>
);

class HomePage extends React.Component {
  componentDidMount() {
    console.log(this.heroRegion0, this.heroRegion1);
  }

  render() {
    return (
      <React.Fragment>
        {[
          { class: "light", copy: "first div" },
          { class: "dark", copy: "second div" }
        ].map((hero, i) => (
          <Hero
            heroRef={el => (this[`heroRegion${i}`] = el)}
            class={hero.class}
            copy={hero.copy}
          />
        ))}
      </React.Fragment>
    );
  }
}

ReactDOM.render(<HomePage />, document.getElementById("root"));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

<div id="root"></div>