如何导入另一个组件但不让其他元素呈现到 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 => {&nbsp; &nbsp; return <Torrent name={torrent.title} magnet={torrent.magnet} image={torrent.image_url}/>})或者像这样直接退货。this.state.torrents.map(torrent => (&nbsp; &nbsp; <Torrent name={torrent.title} magnet={torrent.magnet} image={torrent.image_url}/>))