反応中にdivが削除されたときに要素が表示されない

Question

反応が新しくなりましたが、CourseコンポーネントからCourseboxコンポーネントに要素を渡そうとしています。私はこれをうまくやっていますが、this.promptで渡していないので、ボタンが表示されています。私はコースのコンポーネントをcoureseboxコンポーネント内に表示したいだけなので、HTMLからdiv id = "course"を削除したいと思います。私は何も離れヘッダーからページに表示されていない場合は削除

これは私の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> 

です。コースからCourseboxコンポーネントに要素を渡しているので、HTMLからコースdivを削除できないはずですか？

まだ必要な場合は、それはなぜですか？

コース名を渡すときにボタンを表示する方法はありますか？

感謝:)コースのコンポーネントをレンダリング

Answer 1

は避けてください。理想的には、ただ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 'コース' を持っているの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}