React中return返回数组无法使用CSS类等属性？求解释示例

Great question! Let's break this down clearly to fix the confusion you're having.

首先，核心区别：数组 vs 容器DOM元素 #

First, let's clarify the key point that's probably tripping you up:

• When you return an array of JSX elements like return [ <p>A</p>, <p>B</p> ], you're rendering multiple sibling elements directly (no wrapping DOM node).
• When you return a container like return <div className="myClass">...</div>, you're rendering a single DOM node (the <div>) that wraps your inner elements.

关于"数组形式无法包含CSS类/属性"的正确理解 #

The statement you saw ("return [ ... ] can't include CSS classes, styles, or HTML attributes") is misleadingly phrased. What it actually means is:

You can't add container-level attributes (like a shared className, style, or container-wide onClick) to the array itself, because the array isn't a real DOM element.

However, each individual element inside the array can absolutely have its own attributes—including className, src, href, onClick, and more. These will work perfectly fine, no failure at all.

示例验证 #

Let's prove this with examples:

1. 有效：数组内的元素带属性 #

This code works perfectly—each element has its own attributes, and they all function as expected:

return [
  // 带className、onClick的p标签
  <p key="1" className="bold-red" onClick={() => alert('Clicked paragraph!')}>
    Hey, I'm {this.props.name}
  </p>,
  // 带src、alt的图片
  <img key="2" src="/profile.jpg" alt="User profile" style={{ width: '50px' }} />,
  // 带href、target的链接
  <a key="3" href="/about" target="_blank">Learn more</a>
];

Note: We add key to each array element because React requires keys for list items to track changes efficiently.

2. 无效：尝试给数组加容器属性 #

This is what the original statement is warning against—you can't do this, because arrays don't have DOM properties like className:

// ❌ 无效语法：数组本身不能加className
return [
  <p>Hello</p>,
  <p>World</p>
].className = "container";

// ❌ 也不能这样写，语法错误
return [<p>Hello</p>, <p>World</p> className="container"];

3. 容器DOM元素的用法（带统一属性） #

If you need shared styles or events for your group of elements, use a real DOM container like <div> or <section>. This lets you add container-level attributes, and you can still add individual attributes to inner elements:

return (
  <div className="container" style={{ padding: '20px', border: '1px solid gray' }} onClick={() => alert('Container clicked!')}>
    <p className="bold-red">Hello</p>
    <img src="/profile.jpg" alt="User profile" />
    <a href="/about">Learn more</a>
  </div>
);

4. 替代方案：React Fragment #

If you don't want to add an extra DOM node (like <div>) but need to group elements, use React Fragment (<> or <React.Fragment>). Like arrays, Fragments don't render a real DOM node, so you can't add className or style to them—but inner elements can still have their own attributes:

return (
  <>
    <p className="bold-red">Hello</p>
    <img src="/profile.jpg" alt="User profile" />
    <a href="/about">Learn more</a>
  </>
);

回到你的教程代码 #

The example you saw:

return [ 
  <p onClick={this.props.click}> Hey, I am {this.props.name}{this.props.children} and my age is {this.props.age} </p>, 
  <input type="text" onChange={this.props.changed} value={this.props.name} /> 
]

is valid because each element has its own event attributes (onClick, onChange). If you added className to the <p> or placeholder to the <input>, those would work just as well—no issues at all.

总结 #

• Vanilla JS restricts return to one value; React 16+ extends this to allow returning arrays/Fragments for multiple sibling elements.
• Array elements can have all standard JSX attributes—this doesn't cause failure.
• You can't add container-level attributes to arrays/Fragments (since they aren't real DOM nodes); use a <div>/<section> if you need shared styles/events.

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