Question

我很反应但我正在尝试将元素从Course组件传递到我的Coursebox组件。我正在成功地执行此操作但是正在显示该按钮，因为我没有使用this.prompt传递该按钮。我想删除div id =＆＃34;当然＆＃34;来自HTML，因为我只希望课程组件显示在couresebox组件中。

这是我的JSX代码

class Course extends React.Component {
render() {
return (
<div className="course">

    <h3>{this.props.coursename}</h3>
    <h4> {this.props.status} {this.props.progress}</h4>
    <button>Start exercise</button>


</div>
);
}
}

ReactDOM.render( < Course />, document.getElementById('course'));


class Coursebox extends React.Component {
render() {
return (
<div>
    <Course coursename="Negotiation" progress= "20%" status="Progress"/>
    <Course coursename="Frontend" progress="56%" status="Progress"/>
    <Course coursename="Food" status="Progress" progress="43%"/>

</div>

);
}
}

 ReactDOM.render( < Coursebox />, document.getElementById('coursebox'));

和HTML

<header id="header">
</header>
<h3 id="search"></h3>
<div id="coursebox"></div>
<div id="course"></div>

当我删除除页眉之外的页面上没有显示任何内容。由于我将元素从Course传递到Coursebox组件，我不应该从HTML中删除课程div吗？

如果仍然需要，那为什么？

有没有办法让我只在课程名称传递时显示按钮？

谢谢:)

Answer 1

避免渲染课程组件。理想情况下，应该只有一个渲染方法，并且应该从该组件调用所有其他组件。因此，仅在CourseBox组件上呈现。

class Course extends React.Component {
render() {
console.log("hey")
return (
<div className="course">

    <h3>{this.props.coursename}</h3>
    <h4> {this.props.status} {this.props.progress}</h4>
    <button>Start exercise</button>


</div>
);
}
}

class Coursebox extends React.Component {
render() {
return (
<div>
    <Course coursename="Negotiation" progress= "20%" status="Progress"/>
    <Course coursename="Frontend" progress="56%" status="Progress"/>
    <Course coursename="Food" status="Progress" progress="43%"/>

</div>

);
}
}

      React.render(<Coursebox />, document.getElementById('coursebox'));

工作JS小提琴http://jsfiddle.net/kmbw9wgt/3/

Answer 2

1。）见这一行

 ReactDOM.render( < Course />, document.getElementById('course'));

您明确要求在具有ID＆＃39;课程＆＃39;的div中呈现课程。

如果删除它，它将不会单独渲染，而只能从Coursebox元素中渲染。然后你可以安全地删除该div。

2。）是的，您只能在课程名称通过时显示按钮。使用If条件三元运算符。按以下方式添加按钮：

<h3>{this.props.coursename}</h3>
<h4> {this.props.status} {this.props.progress}</h4>
{ this.props.coursename ? (<button>Start exercise</button>): null}

当反应中删除div时，元素不显示

2 个答案: