react使用getElementById获取span里的文本内容

在 React 中，你可以使用 `ref` 属性来获取 DOM 元素，然后使用 `textContent` 属性来获取元素里的文本内容。

例如，假设你有一个以下的组件：

function MyComponent() {
  const myRef = React.useRef(null);

  function handleClick() {
    const spanText = myRef.current.textContent;
    console.log(spanText);
  }

  return (
    <div>
      <span ref={myRef}>Some text</span>
      <button onClick={handleClick}>Get text</button>
    </div>
  );
}

这里，我们使用 `useRef` 钩子创建了一个 `myRef` 引用，并将其传递给了 `<span>` 元素的 `ref` 属性。然后，在 `handleClick` 函数中，我们使用 `myRef.current.textContent` 来获取 `<span>` 元素里的文本内容。

当用户点击 "Get text" 按钮时，控制台就会输出 "Some text"。

相关问题

react如何获取span里的文本内容

你可以使用 React 的 ref 来获取 span 元素的文本内容。具体操作如下：

1. 在 span 元素上添加 ref 属性：

<span ref={spanRef}>这是文本内容</span>

2. 在组件中定义 ref：

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.spanRef = React.createRef();
  }
  
  componentDidMount() {
    const spanText = this.spanRef.current.innerText;
    console.log(spanText); // 输出：这是文本内容
  }
  
  render() {
    return (
      <div>
        <span ref={this.spanRef}>这是文本内容</span>
      </div>
    );
  }
}

在上面的代码中，我们使用 React.createRef() 方法创建了一个名为 spanRef 的 ref，并在组件的 render 方法中将其添加到 span 元素上。在 componentDidMount 方法中，我们可以使用 this.spanRef.current.innerText 获取 span 元素的文本内容。

react获取span的内容折行的宽高

要获取一个`span`元素内容折行后的宽高，你需要先将`span`元素的样式设置为`display: inline-block`和`white-space: pre-wrap`，这样它就可以自动折行了。然后你可以使用`getBoundingClientRect()`方法来获取其宽高，具体步骤如下：

1. 在函数组件中使用`useRef` hook创建一个指向`span`元素的引用，例如：

const spanRef = useRef(null);

2. 在JSX中将`span`元素和引用绑定在一起，并设置样式，例如：

<span ref={spanRef} style={{ display: 'inline-block', whiteSpace: 'pre-wrap' }}>
  Hello World!
</span>

3. 使用`getBoundingClientRect()`方法获取`span`元素折行后的宽高，例如：

const rect = spanRef.current.getBoundingClientRect();
const spanWidth = rect.width;
const spanHeight = rect.height;

这样，你就可以得到`span`元素折行后的宽高了。值得注意的是，`getBoundingClientRect()`方法返回的是相对于视口的位置和大小，因此如果你的`span`元素在滚动容器中，你需要将其相对于滚动容器的位置进行转换。