如何在我的 HTML 文件中导入 React 组件？

Question

我正在用 HTML、CSS & Js 制作一个网站； 我需要导入这个反应组件。 我已经按照https://es.reactjs.org/docs/add-react-to-a-website.html中的教程进行操作，但它不起作用。 我不知道该怎么做。 这是组件：

class Card extends React.Component {
  render() {
    return(
        <div className="card">
          <img src={this.props.img} />
          <div className="card-body">
            <h2>{this.props.title}</h2>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.</p>
            <h5>{this.props.author}</h5>
          </div>
        </div>
    )
  }
}

我想在 HTML DOM 中编写几个 div，其中包含用于将大量卡片渲染到页面中的属性。 这可能吗？

Answer 1

在 card.js 中

   class Card extends React.Component {
  render() {
    return(
        <div className="card">
          <img src={this.props.img} />
          <div className="card-body">
            <h2>{this.props.title}</h2>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.</p>
            <h5>{this.props.author}</h5>
          </div>
        </div>
    )
  }
}
export default Card;

当你将它导入文件时，然后像这样根据需要使用它

import Card from './Card';

Answer 2

您可以使用ReactDOM.render将 React 组件渲染到 HTML 页面。

 const { useEffect, useMemo, useState } = React; const applyImg = ({ title, ...book }) => ({ title, ...book, img: `https://via.placeholder.com/100x180?text=${title.replace(/\s+/g, '+')}` }); const fetchCards = () => Promise.resolve([ { title: 'In Search of Lost Time', author: 'Marcel Proust' }, { title: 'Ulysses', author: 'James Joyce' }, { title: 'Don Quixote', author: 'Miguel de Cervantes' } ].map(applyImg)); const Card = (props) => { const { author, img, title } = props; return ( <div className="card"> <img src={img} /> <div className="card-body"> <h2>{title}</h2> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.</p> <h5>{author}</h5> </div> </div> ); }; const App = ({ title }) => { const [books, setBooks] = useState([]); useEffect(() => { fetchCards().then(result => { setBooks(result); }); }, []) return useMemo(() => ( <div className="app"> { books.map(book => <Card {...book} />) } </div> ), [books]); }; /* Import your App as a module, into your HTML file. */ ReactDOM.render(<App />, document.getElementById('react'));

 html, body { width: 100%; height: 100%; margin: 0; padding: 0; }.app { display: flex; justify-content: center; align-items: flex-start; }.card { display: flex; flex-direction: column; border: thin solid grey; align-items: center; margin: 0.667em; padding: 0.33em; }.card-body { display: flex; flex-direction: column; justify-content: center; align-items: center; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.1/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.1/umd/react-dom.production.min.js"></script> <h1>Book List</h1> <div id="react"></div>