如何使用 reactjs 增加不同组件元素的字体大小

Question

So I am trying to increase the font size of the paragraph element in the content.jsx file using the button with the onClick of handleFontSize in the header.jsx. Right now my issue is that the increaseFont function in App.jsx is not working correctly. It is only staying at 12 each time I click the button. I want it to go up two font sizes each time so it would make the fontSize 12px(default) then 14px then 16px and so on.

Header.jsx file

import React from "react"; react

function Header ({ loggedIn, handleLoggedInClick, handleFontSize }) {
  return (
    <div>
      <button onClick={handleLoggedInClick}>
        {loggedIn ? "Log Out" : "Log In"}
      </button>
      <button onClick={handleFontSize}>
        Increase
      </button>
    </div>
  );
}

export default Header;

Content.jsx file

import React from "react";

function Content ({ loggedIn, fontSize }) {
  return loggedIn && <p style={{fontSize:{fontSize}}}>CONTENT</p>;
}

export default Content;

App.jsx file

import React, { useState } from "react";
import Content from "./Content";
import Header from "./Header";

function App () {
  const [loggedIn, setLoggedIn] = useState(false);
  const [newFontSize, setFontSize] = useState(12);
  const toggleLoggedIn = () => setLoggedIn(!loggedIn);
  
  const increaseFont = () => setFontSize(newFontSize + 2)
  
  
  return (
    <div>
      <Header loggedIn={loggedIn} handleLoggedInClick={toggleLoggedIn} />
      <Content loggedIn={loggedIn} handleFontSize={increaseFont} fontSize={newFontSize} />
    </div>
  );
}

export default App;

Answer 1

Try this:

App.js

import React, { useState } from "react";
import Content from "./Content";
import Header from "./Header";

function App () {
  const [loggedIn, setLoggedIn] = useState(false);
  const [newFontSize, setFontSize] = useState(12);
  const toggleLoggedIn = () => setLoggedIn(!loggedIn);
  
  const increaseFont = () => setFontSize(newFontSize + 2)
  
  
  return (
    <div>
      <Header loggedIn={loggedIn} handleLoggedInClick={toggleLoggedIn} handleFontSize={increaseFont}  />
      <Content loggedIn={loggedIn} fontSize={newFontSize} />
    </div>
  );
}

export default App; 

Content.jsx

import React from "react";

function Content ({ loggedIn, fontSize }) {
  return loggedIn && <p style={{fontSize:fontSize}}>CONTENT</p>;
}

export default Content;

Header.jsx

import React from "react"; react

function Header ({ loggedIn, handleLoggedInClick, handleFontSize }) {
  return (
    <div>
      <button onClick={handleLoggedInClick}>
        {loggedIn ? "Log Out" : "Log In"}
      </button>
      <button onClick={handleFontSize}>
        Increase
      </button>
    </div>
  );
}

export default Header;

Try this and let me know if it works, i only edited the first two files

Answer 2

You're passing handleFontSize to the wrong component.It should be passed to Header component

   <div>
      <Header loggedIn={loggedIn} handleLoggedInClick={toggleLoggedIn} handleFontSize={increaseFont} />
      <Content loggedIn={loggedIn} fontSize={newFontSize} />
    </div>