是否有可能在反应组件标签之间传递文本？

Question

我想知道是否有可能在两个React组件标签之间传递数据

例:

Component.js

var React = require('react');

export class MyComponent extends React.Component {
    render() {
        return /*some text*/;
    }
}

App.js

/*rendered to page*/
<MyComponent>How do I display this text?</MyComponent>

我知道我可以添加,this.props.text但只是好奇,如果这是一个选项

Answer 1

你可以使用this.props.children:

export class MyComponent extends React.Component {
    render() {
        return <div>{this.props.children}</div>
    }
}

然后将其写为JSX元素:

<MyComponent>How do I display this text?</MyComponent>

Answer 2

类似于 Danny Delott 的答案，除了更简单的功能组件和道具解构。

export default function MyComponent({ children }) {
  return (
    <div>{children}</div>
  );
}