reactjs - 条件渲染和内联 IF 不起作用
问题描述
我有两个问题:
- 条件渲染在统计组件上效果不佳
- 第 46 行的内联 IF 不起作用,所以我注释掉了。我用 typeof jc func 检查了值,所有值都是数字
如果您发现我做错了什么,请告诉我。
非常感谢!
import React, {useState} from 'react'
import ReactDOM from 'react-dom'
const Feedback = (props) => (
<button onClick={props.handleFeedback}>{props.text}</button>
)
const Statistics = (props) => {
console.log(props);
if (props.total.length === 0) {
return (
<div>empty</div>
)
}
return (
<div>
<p>all {props.total}</p>
<p>average {props.average}</p>
<p>positive {props.positive}</p>
</div>
)
}
const App = () => {
const [good, setGood] = useState(0)
const [neutral, setNeutral] = useState(0)
const [bad, setBad] = useState(0)
const setToGood = (newValue) => () => {
setGood(newValue)
}
const setToNeutral = (newValue) => () => {
setNeutral(newValue)
}
const setToBad = (newValue) => () => {
setBad(newValue)
}
const total = good + neutral + bad;
const average = (good - bad) / total
const positive = (good / total * 100 === 0 ) ? '' : (good / total * 100)
console.log(positive);
return (
<div>
<h1>give feedback</h1>
<Feedback handleFeedback={setToGood(good +1)} text="good" />
<Feedback handleFeedback={setToNeutral(neutral +1)} text="neutral" />
<Feedback handleFeedback={setToBad(bad +1)} text="bad" />
<h1>statisctics</h1>
<p>good {good}</p>
<p>neutral {neutral}</p>
<p>bad {bad}</p>
<Statistics total={total} average={average} positive={positive}/>
</div>
)
}
ReactDOM.render(
<App />,
document.getElementById('root')
)
解决方案
里面IF
不要使用props.total.length
,因为总number
类型不是字符串。
推荐阅读
- flutter - 为什么 SearchDelegate 的 buildSuggestion 方法不起作用?
- java - 使用哈希映射(键/值对)处理帖子表单的成语
- artifactory - Artifactory OSS版无维护操作
- angular - 当我在 Angular 中导航到其路由的子子项时,如何保持 mat-tab 处于活动状态?
- spring - Spring 工具套件:非空属性引用空值或瞬态值
- asp.net-mvc - 在 MVC/.Net Core 中使用“返回确定(等待结果)”是否可以?
- codenameone - iOS调试错误,调试证书生成
- laravel - Laravel $request->all() 为空
- json - 合并具有相同键的对象数组
- python - 使用 pandas read_html() 从我的大学网站抓取表格时遇到的问题