如何在反應中獲得布爾類型的道具值

我已經創建了一個組件，我在其中傳遞兩個道具 - taskName，它是字符串和布爾型的狀態。我發現了一種在我的App.js中獲取taskName的方法，但在布爾類型的情況下失敗。如何在反應中獲得布爾類型的道具值

不反應支持布爾道具嗎？

TaskComponent.js

export default class TaskComponent extends Component { 
    render() { 
     var taskStatus = this.props.status; 
     if(taskStatus) 
      return <h1><strike>Task: {this.props.taskName}</strike></h1> 
    } 
}

App.js

class App extends Component { 
    render() { 
    return (
     <TaskComponent taskName="Buy Milk" status={false} /> 
    ); 
    } 
} 

export default App;

嘗試獲取狀態值，我得到這個錯誤。

TaskComponent.render（）：必須返回有效的React元素（或null）。您可能返回了未定義的數組或其他無效對象。

來源

2017-06-06 N Sharma

什麼'渲染'返回'如果（！taskStatus）'？ – Hodrobond

因爲你的時候狀態是假（默認情況下它會返回undefined這就是爲什麼你所得到的錯誤）不返回任何東西，你忘了else條件，你需要返回的東西時，狀態將爲false。如果你不想render然後return null。

寫這樣的：

render() { 
    var taskStatus = this.props.status; 
    if(taskStatus) 
     return <h1><strike>Task: {this.props.taskName}</strike></h1> 
    else return null; 
}

來源

2017-06-06 18:16:15

哇快速回復:)，我在等待接受你的回答。 7分鐘... –

返回NULL是taskStatus是假的，那原因你因爲什麼都不會返回一個錯誤是if condition不匹配

class App extends React.Component { 
 
    render() { 
 
    return (
 
     <TaskComponent taskName="Buy Milk" status={true} /> 
 
    ); 
 
    } 
 
} 
 

 
class TaskComponent extends React.Component { 
 
    render() { 
 
     var taskStatus = this.props.status; 
 
     if(taskStatus) 
 
      return <h1><strike>Task: {this.props.taskName}</strike></h1> 
 
     else 
 
      return null 
 
    } 
 
} 
 

 
ReactDOM.render(<App/>, document.getElementById('app'))

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script> 
 
<div id="app"></div>

來源

2017-06-06 18:17:39

如何在反應中獲得布爾類型的道具值

回答

相關問題