Javascript 是否有可能在react组件标记之间传递文本？

我想知道在react中是否可以在两个react组件标记之间传递数据

例如：

Component.js

var React = require('react');

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

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

App.js

var React = require('react');

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

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

/*呈现到页面*/
如何显示此文本？

---

我知道我可以添加

这个.props.text

，但我想知道这是否是一个选项

你可以使用

这个.props.children

：

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

导出类MyComponent扩展了React.Component{
render（）{
返回{this.props.children}
}
}

然后将其作为JSX元素写入：

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

如何显示此文本？

我喜欢@danny delott的答案，但如果不需要额外的嵌套div，可以使用：

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

导出类MyComponent扩展了React.Component{
render（）{
返回{this.props.children}
}
}

或者，您可能希望将“display”属性设置为“contents”，以防止div影响嵌套文本

export class MyComponent extends React.Component {
    render() {
        return <div style={{display:"contents"}}>{this.props.children}</div>
    }
}

导出类MyComponent扩展了React.Component{
render（）{
返回{this.props.children}
}
}

与Danny Delott的答案类似，只是功能组件和道具解构更简单

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

导出默认函数MyComponent（{children}）{
返回(
{儿童}
);
}