将 JSX 元素声明为子元素

Question

我有一个名为"TextRender"的React组件，它正在渲染一些文本：

render() {
return (
<div>
<Text>
{this.props.sometext}
</Text>
</div>
)

现在，我想使此组件呈现一个作为子元素传递的附加 JSX 元素。像这样：

render() {
return (
<div>
<Text>
{this.props.sometext}
</Text>
</div>
<Text>
{this.props.additionalJsxElement}
</Text>
)

额外的 JSX 元素将在另一个名为 "Test" 的组件中声明：

const additionalElement = () => {
return (
<div>I am the child!</div>
)
}

。并在上面的组件中使用：

return (
<div>
<TextRender additionalJsxElement={additionalElement()}></TextRender>
</div>
)

这样的事情可能吗？因为上面的实现抛出以下错误：

Uncaught TypeError: Converting circular structure to JSON

Answer 1

如何使 TextRender 组件成为像这样的高阶组件，

render() {
return (
<div>
<Text>
{this.props.sometext}
</Text>
<Text>
{props.children}
</Text>
</div>
)

然后像这样使用组件(将子组件注入为子组件(，

return (
<div>
<TextRender>{additionalElement()}</TextRender>
</div>
)

Answer 2

是的，可以这样做

// Create the component as a function
const additionalElement =  ()=><div>I am the child!</div>;
return (
<div>
// pass function as a child
<TextRender additionalJsxElement={additionalElement}></TextRender>
</div>
)

在文本呈现组件中

render() {
const {additionalJsxElement, sometext } = this.props;
return (
<div>
<Text>
{sometext}
</Text>
</div>
<Text>
// the component should be made as follows.
<additionalJsxElement/>
</Text>
)

Answer 3

我想说最惯用的事情可能是：

const TextRenderer = ({ someText }) => (
<>
<div>
<Text>
{ someText }
</Text>
</div>
{ children }
</>
)

然后，您可以将其用作：

<TextRender someText="Yoda" />
// OR
<TextRender someText="Yoda">
Luke Skywalker
</TextRender>
// OR
<TextRender someText="Yoda">
<div>
Wrapped stuff
</div>
</TextRender>