0

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

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

“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？

问题再现

4

3 回答 3

1

我检查documentation了fluent. 您要达到的目标称为render props in react. 但fluent library将其命名为速记道具

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

<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 />}
    />
于 2020-11-26T18:52:07.367 回答
0

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

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

这里的工作示例：代码

于 2020-11-26T18:24:30.297 回答
0

我会说将 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}} />
    );
}
于 2020-11-26T18:41:18.903 回答