Question

我有组件：

import mongoose from 'mongoose';

const GridFsStorage = require('multer-gridfs-storage');
const Grid = require('gridfs-stream');
const gridFSURI = process.env.GRIDFS_KEY;
const multer = require('multer');

const conn = mongoose.createConnection(gridFSURI);
let gfs;
conn.once('open', () => {
  gfs = Grid(conn.db, mongoose.mongo);
  gfs.collection('files');
});

// Create storage engine
const storage = new GridFsStorage({
  url: gridFSURI,
  file: async (req, file) => {
   return new Promise((resolve) => {
    const fileInfo = {
       filename: file.name,
       bucketName: 'files'
    };
    resolve(fileInfo);
   });
  }
});
const upload = multer({ storage });

export default async (req, res) => {
  const { method } = req;
  switch (method) {
    case 'POST':
      upload.single('file')
      res.status(200).json({msg: "upload requested"})
      break;
    default:
      res.status(400).json({ success: false });
      break;
  }
}

但是在合并请求中得到一条评论，我不需要传递子项，因为函数已经有了它。所以，我的问题是可以在不通过它的情况下渲染孩子。我没有找到这方面的任何信息。

喜欢：

router.post("/image", upload.single('file'), (req, res)=>{
  res.status(200).json({msg: "upload requested"})
})

Answer 1

实际上你不能那样做，你必须从props中获取children对象，就像你说的：

const PapeContainer = ({children}) => {
  return (
    <div //some classes and other stuff>
     {children}
    </div>
  );
}

我认为该评论想说的是，您不必在父组件中将子项作为名为“子项”的特定道具传递，如下所示：

<PapeContainer //some classes and other stuff
   children={someChildren}
/>

这是没有意义的，因为“children”是 React 的一个特殊属性，它包含在组件中定义的任何子元素。因此，不是明确地传递道具，而是将子内容放在父标签中，如下所示：

<PapeContainer //some classes and other stuff>
   {someChildren}
/>

Answer 2

实际上你不能那样做。您可以做的是将子项作为组件道具或层次结构子项传递，如下所示（这是相同的组件道具，但具有另一个代码实现）：

// The children container component
function ReceiveChild({children}) {
    return (
        {children}
    );
}

// DOM Element hierarchy method component
function PassChild() {
    return (
        <ReceiveChild>
            <p className="the-child-div">Children</p>
        </ReceiveChild>
    );
}

// Component prop method component
function PassChild2() {
    return (
        <ReceiveChild children={
            <p className="the-child-div">
                Children
            </p>} 
        />
    );
}

如何在不传递它的情况下在反应组件中渲染子组件？

2 个答案: