javascript - react : Access element's text

Question

我的组件在其他 render() 中使用，例如

return (<MyElem>Some text here</MyElem>)

如何访问组件类中的“Some text here”字符串？

Answer 1

您使用 children property ，其中包含您元素的子元素(可能是文本或子元素数组 [我 认为 如果它不是文本，它始终是一个数组]，请参阅链接了解详细信息)。例如:

const Foo = props => {
  console.log(props.children);
  return (
    <div>{props.children}</div>
  );
};
ReactDOM.render(
  <Foo>Hi There</Foo>,
  document.getElementById("react")
);

<div id="react"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

它使用无状态功能组件 (SFC)，但对于 Component 子类也是一样的:

class Foo extends React.Component {
  render() {
    console.log(this.props.children);
    return (
      <div>{this.props.children}</div>
    );
  }
};
ReactDOM.render(
  <Foo>Hi There</Foo>,
  document.getElementById("react")
);

<div id="react"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

这是 children 不仅仅用于文本这一事实的示例:

class Foo extends React.Component {
  render() {
    console.log(this.props.children);
    return (
      <div>{this.props.children}</div>
    );
  }
};
ReactDOM.render(
  <Foo>
    <div>Hi there</div>
    <Foo><span>nested Foo > Foo > span</span></Foo>
  </Foo>,
  document.getElementById("react")
);

<div id="react"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>