如何在反应中获得布尔类型的道具值

我已经创建了一个组件，我在其中传递两个道具 - 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

如何在反应中获得布尔类型的道具值

回答

相关问题