如何导入另一个组件但不让其他元素呈现到 div？

Question

我希望 Torrent 组件在没有将该 Torrent 渲染到 DOM 元素的情况下进行渲染。我该怎么做？我希望我的 Torrent 表组件由 Torrent 组件组成，这取决于我的 API 反馈给我的内容。但是我遇到了一个问题，它没有在网站上呈现，因为 ReactDOM.render() 没有将组件绑定到 DOM 元素。class TorrentTable extends React.Component{    constructor(props)    {        super(props);        this.state = {            torrents : []        };    }    componentDidMount()    {        let torrent_string = window.location.href.split("/")[4];        console.log(window.location.href);        fetch(`api/get/${torrent_string}`)        .then(res => res.json())        .then(data => {            this.setState({                torrents : data            })        });    }    render()    {        return(            <table className="table" style={{ width : "100%"}}>                <thead>                    <tr>                        <th scope="col">                        </th>                        <th scope="col">                            Torrent Name                        </th>                        <th scope="col">                            Magnet                        </th>                    </tr>                </thead>                <tbody>                    {                        this.state.torrents.map(torrent => {                            <Torrent name={torrent.title} magnet={torrent.magnet} image={torrent.image_url}/>                        })                    }                </tbody>            </table>        );    }}ReactDOM.render(<TorrentTable />, document.getElementById("torrent_table"));

Answer 1

您只需要使用 ReactDOM.render() 渲染应用程序的根。

我认为问题在于您没有从 map 语句中返回组件。

要么添加这样的 return 语句。

this.state.torrents.map(torrent => {

    return <Torrent name={torrent.title} magnet={torrent.magnet} image={torrent.image_url}/>

})

或者像这样直接退货。

this.state.torrents.map(torrent => (

    <Torrent name={torrent.title} magnet={torrent.magnet} image={torrent.image_url}/>

))