Question

创建一个具有布尔属性hasSeat的HouseFull组件。该组件应根据道具用文本HouseFull或Vacant渲染div。

Answer 1

我猜这是您要寻找的？如果将prop hasSeat属性更改为true或false，则会得到所需的结果。

import React, { Component } from "react";
import ReactDOM from "react-dom";

 class HouseFull extends Component {
      render() {
        return (
           <div>{this.props.hasSeat ? "HouseFull" : "Vacant"}</div>
        );
      }
    }


class App extends Component {
  render() {
    return (
      <div>
        <HouseFull hasSeat={true} />
      </div>
    );
  }
}

export default App;

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

Answer 2

这就是答案，您要寻找的

HouseFull.js

class HouseFull extends Component {
  render(){
      return(
            <div>
               <p>{this.props.hasSeat? 'Vacant': 'HouseFull'}</p>
            </div>
            );
          }
 }

Index.js

ReactDOM.render(<HouseFull hasSeat={true}/>, document.getElementById('root'))

Answer 3

我观察到代码中的更改很小。只需交换条件，因为当您检查真实条件时，第一个表达式将首先计算。

import React, { Component } from "react";
import ReactDOM from "react-dom";

 class HouseFull extends Component {
      render() {

        return (
           <div>{this.props.hasSeat ? "Vacant" : "HouseFull"}</div>
        );
      }
    }


class App extends Component {
  render() {
    return (
      <div>
        <HouseFull hasSeat={true} />
        <HouseFull hasSeat={false} />
      </div>
    );
  }
}

export default App;

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

创建一个具有布尔属性hasSeat的HouseFull组件

3 个答案: