javascript - 如何在reactjs中获取元素属性

Question

我正在尝试获取父容器元素的高度，用作 SVG 背景元素的高度。

有没有办法获取并传递这个属性？

我不断收到“类型错误:无法读取未定义的属性‘refs’”

const Services = ({ classes }) => {
    return (
        <div className={classes.Container} ref="container">//Element I want the height of
            <div className={classes.BGContainer}>
                <BGSVG width={'210'} height={this.refs.container.height} color={'blue'} />//Where I want to pass height to
            </div>
            <div className={classes.Services}>
                {services.map((e, i) => (
                    <ServiceItem
                        title={e.title}
                        icon={e.icon}
                        info={e.info}
                        inverted={i % 2 === 1 ? true : false}
                    />
                ))}
            </div>
        </div>
    );

Answer 1

在功能组件中，您需要使用名为 useRef 的 React Hook像这样:

const TextInputWithFocusButton = (props) => {
  const inputEl = useRef(null);
  const onButtonClick = () => {
    // `current` points to the mounted text input element
    inputEl.current.focus();
  };
  return (
    <>
      <input ref={inputEl} type="text" />
      <button onClick={onButtonClick}>Focus the input</button>
    </>
  );
}

如果您注销 inputEl，您将看到对输入元素的引用已被记录。 DOM 元素引用允许您访问所引用的特定 DOM 元素的大多数属性。