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

Question

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

例：

组件.js

var React = require('react');
export class MyComponent extends React.Component {
render() {
return /*some text*/;
}
}

应用.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>
);
}

Answer 3

我喜欢@danny-delott的答案，但是如果你不想要一个额外的嵌套div，你可以使用React Fragments：

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

或者，可能希望将"display"属性设置为"内容"，以防止div影响嵌套文本。

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