Question

我是React的初学者，但因为我找不到答案而不得不问这个问题

这是我的代码

 class UserLogin extends React.Component{
    render(){
        const {title} = this.props
        return(
            <p> {title} </p>
        );
    }
}

class UserGuide extends React.Component{
    render(){
        return(
            <p> Test class </p>,
                <UserLogin title = "Nexicolt" />
        );
    }
}
ReactDOM.render(
   <UserGuide/>,
    document.getElementById('app')
);

输出为

Nexicolt

不是

test class 
Nexicolt

为什么？

Answer 1

请注意，<p>之后的逗号位于JSX外部，因此是JavaScript语法，而不是HTML文本节点。

Comma operator忽略表达式的第一部分<p> Test class </p>，仅从渲染功能<UserLogin title = "Nexicolt" />中返回第二部分。

如果有多个子元素，则应返回一个数组：

return [
    <p> Test class </p>,
    <UserLogin title = "Nexicolt" />
];

或片段：

return <>
    <p> Test class </p>
    <UserLogin title = "Nexicolt" />
</>;

如果您不确定逗号运算符的用法是否正确，可以使用ESLint no-sequences规则来防止它被使用并避免潜在的错误。

Answer 2

如果您使用的是React 16. *，则可以使用片段：

return <>
    <p> Test class </p>
    <UserLogin title = "Nexicolt" />
</>;

或返回数组

return [
    <p> Test class </p>,
    <UserLogin title = "Nexicolt" />
];

如果您使用的是低于16的React，则将其包装在div中，如下所示：

return (
     <div>
        <p> Test class </p>,
        <UserLogin title = "Nexicolt" />
    </div>
);

Answer 3

您在渲染功能中使用了逗号运算符，它将只使用渲染功能的最后一部分。

<p> Test class 1</p>,
<UserLogin title = "Nexicolt" />,
<p> Test class 2</p>

这将返回结果“测试类2”。

反应另一个组件中的组件

3 个答案: