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

从节点中提取文本时遇到一些问题

节点是一个段落

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

但是，此控制台不返回任何内容。我也尝试过通过className访问节点

---

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

您的

属性中有一个输入错误

你写道：

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

{`${this.state.landing}？utm_活动=${this.state.utm}}

这应该是：

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

{${this.state.landing}？utm_活动=${this.state.utm}}

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

参考：（检查浏览器控制台或现场控制台）

希望这有帮助
 也许您需要将段落的文本保存到状态并显示出来。因此，您将知道该值：

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

state={msg:`${landing}？utm_活动=${utm}}
...
{${this.state.msg}
感谢大家的贡献。我以前的方法有一些错误

也就是说，尝试在函数中设置ref。下面是我为使它工作而采取的步骤

1） 使用React.createRef（）构造ref；（）

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

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

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

下面是控制台的屏幕截图

一点一点地缩短（这个纹理）

bitly.shorten（此.Texture.value）

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

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

希望这有帮助


//在图片中
{heading}//Hello CodeSandbox
{getNodeText（标题）}

从这里开始
我相信您在
refs
属性的
元素中有一个类型，它应该是
ref
class Newone extends Component {
    state = {
        allocation: "Acq",
      };
      textUrl = React.createRef();

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

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

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)

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