React 组件不接受 JSX Element 作为道具答案

【问题标题】：React component is not accepting JSX Element as propReact 组件不接受 JSX Element 作为道具
【发布时间】：2021-03-09 15:20:40
【问题描述】：

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

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

“Box”组件的简写 prop 传递了一个 JSX 元素，但该插槽仅支持字符串|数字|对象|数组|ReactElements。

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"} />}
        />
    )
}

如何将组件（带有道具）作为content 传递？

问题reproduction

【问题讨论】：

标签： javascript reactjs jsx fluent fluent-ui

【解决方案1】：

任意函数不是函数组件。如果您希望 React 将函数编译为组件，您需要 (a) 范围内的标识符和 (b) 大写字母作为此标识符的首字母。 doc.

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

这里的工作示例：code

【讨论】：

OK 所以应该把代码放在一个唯一的组件中，你能解释一下为什么如果我在content中使用功能组件，代码就不起作用
这可能很奇怪，但您没有发送功能组件，只是一个功能。要作为组件编译，您需要 (a) 范围内的标识符和 (b) 大写字母作为此标识符的首字母。否则，React 不会将你的函数编译为 React.createElement()。 reactjs.org/docs/….

【解决方案2】：

我检查了documentation 的fluent。您要实现的目标称为render props in react。但是fluent library 将其命名为Shorthand Props

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

<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 />}
    />

【讨论】：

谢谢，这是我自从开始使用这个 lib 以来一直没有得到的。所以当我想渲染一个反应组件时，我应该指定children item。感谢您的帮助?

【解决方案3】：

我会说将 JSX 作为 props 传递不是最好的主意，但如果你确定这是你想要的，你总是可以将它转换为字符串，然后传递它，然后再转换回来；像这样（简单的例子）：

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

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

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

【讨论】：