[英]Hello, Why can't I use two return statements in react.js components
I have two functions MissedGoal and MadeGoal using the condition I want to the functions to be displayed alternatively according to the Boolean value (True, false).我有两个函数 MissedGoal 和 MadeGoal 使用我希望函数根据布尔值(真,假)交替显示的条件。 When I change the prop value in index.js from true is displays MadeGoal when I change prop value to false is displays MissedGoal Here is my Code Cond.js当我将 index.js 中的道具值从 true 更改时,显示 MadeGoal 当我将道具值更改为 false 时,显示 MissedGoal 这是我的代码 Cond.js
import React from 'react'
function MissedGoal() {
return <h1>Missed!</h1>
}
function MadeGoal() {
return <h1>Goal!</h1>
}
function Cond(props) {
const isGoal = props.isGoal;
if (isGoal) {
return <MadeGoal />;
}
return <MadeGoal />;
return (
<div>
{isGoal}</div>
)
}
export default Cond
It rendered below by index.js它由 index.js 在下面呈现
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
import Jsx from './Jsx'
import Tools from './Tools';
import Trick from './Trick';
import Foot from './Foot';
import Cond from './Cond';
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
<React.StrictMode>
<App />
<Jsx />
<Tools name="Ishmo" tool="Adobe"/>
<Trick />
<Foot />
<Cond isGoal= {true}/>
</React.StrictMode>
);
The Third return in function Cond is redundant .函数 Cond 中的第三个返回是多余的。 Control will never reach there.控制永远不会到达那里。 Control goes out of the block after encountering a return statement遇到return语句后控制出块
Note: React components are just functions , so when we return multiple elements at the same level, we are effectively using multiple return statements at the same level of a function.注意: React 组件只是函数,所以当我们在同一级别返回多个元素时,我们实际上是在函数的同一级别使用多个返回语句。
When JavaScript reaches a return statement, the function will stop executing.当 JavaScript 到达 return 语句时,函数将停止执行。
If the function was invoked from a statement, JavaScript will "return" to execute the code after the invoking statement.如果函数是从语句中调用的,JavaScript 将“返回”以执行调用语句之后的代码。
Functions often compute a return value.函数通常计算返回值。 The return value is "returned" back to the "caller":返回值“返回”给“调用者”:
If you return the third statement you can use condition (if, else if, else).`如果您返回第三条语句,您可以使用条件(如果、否则如果、否则)。
import React from 'react'
function MissedGoal() {
return <h1>Missed!</h1>
}
function MadeGoal() {
return <h1>Goal!</h1>
}
function Cond(props) {
const isGoal = props.isGoal;
if (isGoal) {
return <MadeGoal />
} else if (isGoal == false) {
return <MissedGoal />
} else {
return <div>Please add your message here</div>
}
}
export default Cond;
` `
const isGoal = props.isGoal;
if (isGoal) {
return <MadeGoal />;
}
return <MadeGoal />; // change it to MissedGoal component
return (
<div>
{isGoal}</div>
)
}
here both times you are returning这两次你都回来了
and after returning a component you cant return it again if you returned me my pen then without again taking it how can you again give me退回一个组件后,如果你把我的笔还给我,你就不能再把它还给我,然后又不拿它,你怎么能再给我
so you cant return a component 2 times because the code is not reachable所以你不能返回一个组件 2 次,因为代码不可访问
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.