Javascript React组件不接受JSX元素作为prop

我会将组件呈现为内容而不是字符串

实际上，我得到了这个错误：

“Box”组件的速记道具传递了一个JSX元素，但此插槽仅支持字符串| number | object | array |元素

从“../containers/Media”导入AudioItem
const AudioLabel=（道具）=>{
让url=”https://www.soundhelix.com/examples/mp3/SoundHelix-Song-1.mp3"
const[audio]=useState（新音频（url））；
const[ispused，setispused]=useState（audio.paused）
return（{props.content}
任意函数不是函数组件。如果要将函数编译为组件，则需要（a）范围中的标识符，以及（b）此标识符的第一个字母为大写字母

要使代码正常工作，您需要创建一个新组件来呈现span和AudioItem

这里的工作示例：
我想说，将JSX作为道具传递不是最好的主意，但如果您确定这是您想要的，您可以始终将其转换为字符串，然后传递，然后再转换回；就像这样（简单示例）：

constjsxtopass=（）=>{
返回(
例子
);
}
常量父项=（）=>{
返回(
);
}
const Child=（道具）=>{
返回(
);
}
我已经查看了
fluent
的
文档
。您试图实现的是react中的
渲染道具
。但是
fluent库
将其命名为

根据他们的文档，您需要遵循特定的模式来实现这一点。在这里，我添加了
标签组件的代码，它消除了错误

(
{props.content}
)
}}
圆形
形象={{
src：“public/images/avatar/small/matt.jpg”，
阿凡达：真的
}}
图标={}
/>
好的，那么应该将代码放在一个唯一的组件中，如果我在
内容中使用一个功能组件，你能解释为什么代码不起作用吗？这可能很奇怪，但你没有发送一个功能组件，只是一个函数。要编译为一个组件，你需要（a）范围中的标识符和（b）一个大写字母作为此标识符的第一个字母。否则，React将不会编译您的函数来React.createElement（）…谢谢，这是我开始使用此库以来没有得到的。因此，当我要呈现React组件时，我应该指定
子项。谢谢您的帮助
import AudioItem from '../containers/Media'
const AudioLabel = (props) => {
    let url = "https://www.soundhelix.com/examples/mp3/SoundHelix-Song-1.mp3"
    const [audio] = useState(new Audio(url));
    const [isPaused, setIsPaused] = useState(audio.paused)
    return (<Label content={({ ...props }) => (<><span>{props.content}</span> <AudioItem isPaused={isPaused} setIsPaused={setIsPaused} audio={audio} /></>)}
        circular
        image={{
            src: 'public/images/avatar/small/matt.jpg',
            avatar: true,
        }}
        icon={
            <CloseIcon
            />}
    />)
}
export default AudioLabel

import { Button, Header, List, RadioGroup, ItemLayout } from '@fluentui/react-northstar'
import { PlayIcon, PauseThickIcon } from '@fluentui/react-icons-northstar'

const AudioItem = (props) => {
    return (
        <ItemLayout
            headerMedia={<Button icon={props.isPaused ? (<PlayIcon />) : (<PauseThickIcon />)} onClick={() => { props.isPaused ? props.audio.play() : props.audio.pause(); props.setIsPaused(props.audio.paused) }} text content={props.isPaused ? "Play" : "Pause"} />}
        />
    )
}

const JSXToPass = () => {
    return (
        <div> example </div>
    );
}

const Parent = () => {
    return (
        <Child content={React.renderToString(JSXToPass)} />
    );
}

const Child = (props) => {
    return (
        <div dangerouslySetInnerHTML={{__html: props.content}} />
    );
}

<Label
      content={{
        chidren: ({ ...props }) => (
        <>
          <span>{props.content}</span>
            <AudioItem
              isPaused={isPaused}
              setIsPaused={setIsPaused}
              audio={audio}
            />
        </>)
      }}
      circular 
      image={{
        src: "public/images/avatar/small/matt.jpg",
        avatar: true
      }}
      icon={<CloseIcon />}
    />