Question

我创建了一个组件，我传递了两个道具 - taskName是字符串，状态是boolean。我找到了一种在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）。您可能已经返回了undefined，数组或其他一些无效对象。

Answer 1

因为当状态为false 时您没有返回任何内容<默认情况下返回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;
}

Answer 2

返回null是taskStatus为false，这就是你收到错误的原因，因为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>

如何在反应

2 个答案: