小编Owa*_*ais的帖子

我想使用反应钩子在反应功能组件中获取图像的高度。

我使用了以下代码：

import React, { useRef, useEffect } from 'react'

const DepthChartContent = props => {
  const ref = useRef()

  useEffect(() => {
    if (ref && ref.current && ref.current.clientHeight) {
      console.log('called')
    }
    console.log('useEffect', {
      ref,
      current: ref.current,
      clientHeight: ref.current.clientHeight,
    })
  }, [])

  return (
    <img
      ref={ref}
      className="depth-reference-bar"
      src={DepthRuler}
      alt="no ruler found"
    />
  )
}

这样做的问题是它返回 clientHeight 为 0，但 useEffect 中的 console.log 具有正确的 clientHeight，如下图所示。

这意味着ref && ref.current && ref.current.clientHeight在调用时未定义，但在同一 useEffect 中的安慰显示 的正确值ref，current: ref.current但为零 …

我想根据一个事件key/value在各自中嵌入一对新indexed array of objects的onChange.

但是,它已正确完成但在数组中添加了额外的元素.

原始对象数组:

0:{data: {…}}
1:{data: {…}}
2:{data: {…}}
3:{data: {…}}
4:{data: {…}}

达到的结果:

0:{data: {…}}
1:{data: {…}}
2:{data: {…}, origin: "UK"}
3:{data: {…}, origin: "UK"}
4:{data: {…}}
5:"UK"
6:"UK"

预期结果:

0:{data: {…}}
1:{data: {…}}
2:{data: {…}, origin: "UK"}
3:{data: {…}, origin: "UK"}
4:{data: {…}}

下面是我在循环中执行的代码:

render: (rowData, indexes) => {
          return (
            <SelectField
              id={`origin-${indexes.rowIndex}`}
              defaultValue="US"
              style={{ position: 'absolute' }}
              onChange={text => {
                this.setState(
                  {
                    generalPermitSelectedVehicles: [
                      ...generalPermitSelectedVehicles,
                      (generalPermitSelectedVehicles[
                        indexes.rowIndex
                      ].origin …

我有一个父组件，其中以下组件在map函数中动态生成，如下所示：

const renderListing = this.props.listing.map(function(list, index) {
        return (
          <Listing
            key={index}
            title={list.title}
            totalWorkers={list.totalWorkers}
          />
        );
      }, this);

在此<Listing />组件中，我具有一个复选框，react-md如下所示：

import { Checkbox } from "react-md";
class Listing extends React.Component {
  render() {
    return (
<Checkbox id="`listSector-${this.props.key}`" name="list-sector" />
   );
  }
}

我想给命名的道具key串连起来id="listSector-0" , id="listSector-1"等等。

我已经尝试过字符串文字技术，但是都没有成功。

谁能知道如何给动态this.props.key级联id的checkbox？

谢谢