从React中的节点获取文本内容

Question

从节点中提取文本时遇到一些麻烦。

节点是一个段落。

https.sslVerify false

我正在尝试将节点的内容记录到函数中的控制台。

 <p className="Blend" refs="hello"> { `${this.state.landing}?utm_campaign=${this.state.utm}` } </p>

但是，此控制台没有返回任何内容。我也尝试过使用via className访问节点。

在React中访问文本的正确方法是什么？

Answer 1

您的<p>属性

中有拼写错误

您写道：

<p className="Blend" refs="hello"> { `${this.state.landing}?utm_campaign=${this.state.utm}` } </p>

这应该是：

<p className="Blend" ref="hello"> { `${this.state.landing}?utm_campaign=${this.state.utm}` } </p>

refs属性是错误的，应该是ref

供参考:(查看浏览器控制台或站内控制台）See this sandbox

希望这有帮助！

Answer 2

也许您需要将段落的文本保存到状态并显示它。所以你会知道这个价值：

 state = { msg: `${landing}?utm_campaign=${utm}` } 
 ...
 <p className="Blend"> { ${this.state.msg} } </p>

Answer 3

感谢大家的贡献。我以前的方法有一些错误。

即，尝试在函数中设置ref。以下是我为使其发挥作用而采取的步骤。

1）使用React.createRef（）构造ref; （new in react 16）

class Newone extends Component {
    state = {
        allocation: "Acq",
      };
      textUrl = React.createRef();

2）将ref附加到适当的节点

 <p className="Blend" ref={this.textUrl}> { `${this.state.landing}?utm_campaign=${this.state.utm}` } </p>

3）使用value.innertext

引用ref

handleLinkClick = (event) => {
bitly.shorten(this.textUrl.value.innerText) 

**确保您使用的是React版本16.3.0-alpha.1。

以下是控制台的屏幕截图。

bitly.shorten（this.textUrl）

bitly.shorten（this.textUrl.value）

bitly.shorten（this.textUrl.value.innerText）

如果您只想返回节点中的文本，请确保附加innerText。

希望这有帮助

Answer 4

const getNodeText = node => {
  if (['string', 'number'].includes(typeof node)) return node
  if (node instanceof Array) return node.map(getNodeText).join('')
  if (typeof node === 'object' && node) return getNodeText(node.props.children)
}

const printHTML = ref => ref && (ref.innerText = document.querySelector('h1').outerHTML)

https://codesandbox.io/s/react-getnodetext-h21ss

  // in the picture
  {heading} // <Heading>Hello <span className="red">Code</span>Sandbox</Heading>
  <pre ref={printHTML}/>
  <pre>{getNodeText(heading)}</pre>

最初是从这里https://stackoverflow.com/a/60564620/985454