如何用JS/React替代Jinja2宏实现动态列表功能？

No problem at all—React's component system is perfect for replacing Jinja2 macros like this. Here's how you can recreate that dynamic list functionality step by step:

Step 1: Define your data (equivalent to {% set botnewsArgs %}) #

First, store your argument data as a JavaScript array—this mirrors the Jinja2 variable you set up:

const botnewsArgs = [
  ["channel", "Sets the channel to send bot news to"],
  ["toggle", "Toggles posting bot news"]
];

Step 2: Create a reusable component (equivalent to the Jinja2 macro) #

Instead of a Jinja2 macro, we'll make a React component that accepts the argument name and description as props, then returns the corresponding UI:

function ArgItem({ argName, argDescription }) {
  return (
    <>
      <hr />
      <p>{argName}</p>
      <small>{argDescription}</small>
    </>
  );
}

This does exactly what your Jinja2 macro did—takes in parameters and outputs consistent markup. The <> is a React fragment, which lets us return multiple elements without wrapping them in an extra <div> (you could use a div if you need to add styling later).

Step 3: Render the dynamic list (equivalent to calling the macro) #

In your parent component, use Array.map() to loop through your botnewsArgs array and render the ArgItem component for each entry. Don't forget to add a unique key prop (React requires this for list items):

function BotNewsArgsList() {
  return (
    <div>
      {botnewsArgs.map(([name, description], index) => (
        <ArgItem 
          key={index} // Using index here is fine since the list doesn't reorder
          argName={name} 
          argDescription={description} 
        />
      ))}
    </div>
  );
}

Step 4: Use the component wherever you need it #

Just render BotNewsArgsList in your app, and it will generate the same dynamic list your Jinja2 macro did:

function App() {
  return (
    <div className="App">
      <h2>Bot News Arguments</h2>
      <BotNewsArgsList />
    </div>
  );
}

Bonus: Adding flexibility #

If you want to make this even more reusable (like how macros can be reused across templates), you can pass the entire args array as a prop to BotNewsArgsList instead of hardcoding it:

function BotNewsArgsList({ args }) {
  return (
    <div>
      {args.map(([name, description], index) => (
        <ArgItem key={index} argName={name} argDescription={description} />
      ))}
    </div>
  );
}

// Then use it like this:
<BotNewsArgsList args={botnewsArgs} />

This approach keeps your code modular, reusable, and fully aligned with React's best practices—just like your original Jinja2 setup, but tailored for a React environment.

内容的提问来源于stack exchange，提问作者Penemue