Question

我正在努力弄清楚如何为一组特定的子组件指定PropType。我的对话框组件可以获取标题，正文和/或页脚类型的组件。所有这些组件只能使用一次，但可以同时出现。

是否存在建议的方法来指定适当的PropType？

const Title = ({ text }) => (
  <h1>{ text }</h1>
);

const Body = ({ text }) => (
  <p>{ text }</p>
);

const Footer = ({ text }) => (
  <small>{ text }</small>
);

const Dialog = ({ children }) => (
  React.Children.map(children, (child) => {
    return (
      <div>{child}</div>
    )
  })
);

Dialog.propTypes = {
  children: PropTypes.oneOfType([
    PropTypes.instanceOf(Title),
    PropTypes.instanceOf(Body),
    PropTypes.instanceOf(Footer)
  ]).isRequired
}

Answer 1

您是以const mongo = require('./mongo'); async function start() { // other app startup stuff... await mongo.init(); // other app startup stuff... } start();的身份使用Dialog吗？

所以..我不知道以这种方式这样做是否是个好习惯。最好更具体一些。

您为什么不做类似的事情：

const { Users } = require('./mongo');

async function someFunction(userInfo) {
  const user = await Users.addUser(userInfo);
  return user;
}

并像这样使用它：

<Dialog>{children}</Dialog>

或者如果页脚和标题确实需要作为特定组件的实例，则可能是这样：

const Dialog = ({ title, children, footer }) => (
    <div>
        { title } 
        { children }
        { footer }
    </div>
)

Dialog.propTypes = {
    title: PropTypes.element,
    footer: PropTypes.element,
    children: PropTypes.any.isRequired
}

并像这样使用它：

const Title = ({ text }) => (
  <h1>{ text }</h1>
)

const Footer = () => (
  <small>Dialog Footer</small>
)


<Dialog
    title={ <Title text="Dialog Title" /> }
    footer={ <Footer /> }
>
    <p>Body here</p>
</Dialog>

您可以在https://reactjs.org/docs/typechecking-with-proptypes.html

上查看可用的道具类型

特定子组件的PropTypes

1 个答案: