另一个初学者 React 问题 - QRCode Generation

Question

Essentially, I want to generate a QR Code in a ReactJS application. I found a generator on npm for React & React Native. Here is how they set it up on the npm site:

import React from "react";
import ReactDOM from "react-dom";
import QRCode from "react-qr-code";
 
ReactDOM.render(<QRCode value="hey" />, document.getElementById("Container"));

Here is how I set up the page that will hold the QR Code:

import React from "react";
import ReactDOM from "react-dom";
import QRCode from "react-qr-code";

// empty profile page
class Profile extends React.Component 
{
  render() 
  {
    return (
      <div>
          <h1>QR Code Page</h1>
      </div>
  );
}

} 
//ReactDOM.render(<QRCode value="hey" />, document.getElementById("Container"));
export default Profile; 

I have the actual QRCode code commented out, as I'm not sure where to put it in the code so that it works & shows up on the page. When I put it anywhere inside the Profile class the line has red underlines stating that a ";" or ")" is expected (depending on where it's put I get ";" or ")"). I know I'm not missing either, so I'm pretty sure it comes down to where I'm putting the line of code to generate the QRCode.

I'm sorry if this is is an obvious question, I'm still pretty new to React. Please let me know if you need any more information!

Answer 1

Try this.

        import React from "react";
        import QRCode from "react-qr-code";
        
        // empty profile page
        class Profile extends React.Component     {
          render() {
            return (
              <div>
                  <h1>QR Code Page</h1>
                  <QRCode value="hey" />
              </div>
          );
         }
        } 
        export default Profile; 

Answer 2

you can use it return itself it will work

return (
          <div>
              <h1>QR Code Page</h1>
              <QRCode value="hey" />
          </div>)

Answer 3

You can just use the <QRCode value="hey"></QRCode> . You also don't need dom library for this. So I've removed it.

import React from "react";
import QRCode from "react-qr-code";

// empty profile page
class Profile extends React.Component 
{
  render() 
  {
    return (
      <div>
          <h1>QR Code Page</h1>
          <QRCode value="hey"></QRCode>
      </div>
  );
}

} 
export default Profile; 

Check out this live version to see it in action https://codesandbox.io/s/billowing-butterfly-0dr39?file=/src/App.js