反応のブール型の小道具値を取得する方法

Question

私は2つの小道具を渡している場所に1つの構成要素を作成しました.stopNameは文字列であり、ステータスはブール値です。私は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）を返す必要があります。未定義、配列またはその他の無効なオブジェクトが返された可能性があります。

Answer 1

状態は（デフォルトでは undefinedを返すでしょう、あなたがエラーを取得している理由だと） falseの場合、あなたが何かを返すされていないので、あなたは他の条件を忘れてしまった、あなたはときに何かを返す必要がありますステータスはfalseになります。

renderの場合はreturn nullにしたくない場合。

はこのようにそれを書く：

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

Answer 2

戻るnullがtaskStatusで、何も返されませんので、あなたがエラーを取得thatsの理由は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>

と一致していない偽です