[英]React.js - How to implement a function in a child component to unmount another child from the same parent, and mount another component on it's place?
例如,这样的组件:
import React, { Component } from 'react';
import BodyContent from './BodyContent';
import BottomOne from './BottomOne';
import BottomTwo from './BottomTwo';
class App extends Component {
render() {
return (
<div className="App">
<BodyContent />
<BottomOne />
</div>
);
}
}
export default App;
我想在BodyContent
上实现一个函数,该函数卸装BottomOne
并挂载BottomTwo
,因此,当我激活该函数时,代码将重新构建为此:
import React, { Component } from 'react';
import BodyContent from './BodyContent';
import BottomOne from './BottomOne';
import BottomTwo from './BottomTwo';
class App extends Component {
render() {
return (
<div className="App">
<BodyContent />
<BottomTwo />
</div>
);
}
}
export default App;
我对React还是很陌生,因此,如果有更好的方法可以使用,我欢迎您提出建议,但我确实需要最终结果,即BottomOne
上的一个函数,该函数可卸载BottomOne
并装载BottomTwo
。
您可以维护一个状态,该状态指示要渲染的组件。 大概是这样的
import React, { Component } from 'react';
import BodyContent from './BodyContent';
import BottomOne from './BottomOne';
import BottomTwo from './BottomTwo';
class App extends Component {
changeBottomComponent = (comp) => {
this.setState({ showBottom: comp})
}
render() {
return (
<div className="App">
<BodyContent changeBottomComponent={this.changeBottomComponent}/>
{this.state.showBottom === 1 ? <BottomOne /> : <BotttomTwo />}
</div>
);
}
}
export default App;
您可以使用state
或props
来渲染不同的组件。
例:
import React, {
Component
}
from 'react';
import BodyContent from './BodyContent';
import BottomOne from './BottomOne';
import BottomTwo from './BottomTwo';
class App extends Component {
constructor(props) {
super(props);
this.state = {
decider: false
};
}
render() {
const bottomContent = this.state.decider === true ? <BottomOne /> : <BottomTwo />;
return (
<div className="App">
<BodyContent />
{ bottomContent }
</div>
);
}
}
export
default App;
为了实现这一点,需要在父组件中维护状态变量(组件的某种标识符),然后使用该状态变量来呈现不同的组件。
与此同时,您还需要将函数从父级传递到子级,并使用该函数更新父级状态值。
像这样:
class App extends Component {
constructor(){
super();
this.state={
renderOne: true,
}
this.update = this.update.bind(this);
}
update(){
this.setState({renderOne: false})
}
render() {
return (
<div className="App">
<BodyContent update={this.update}/>
{this.state.renderOne? <BottomOne /> : <BottomTwo/> }
</div>
);
}
}
现在在BodyContent
组件内部,调用this.props.update()
来呈现另一个组件。
您还可以直接在状态中使用组件并进行渲染。 这样可以更加灵活。
const BottomOne = () => <div>BottomOne</div>; const BottomTwo = () => <div>BottomTwo</div>; class Example extends React.Component { constructor() { super(); this.state = { show: BottomOne }; this.toggleComponent = this.toggleComponent.bind(this); } toggleComponent() { // Use whatever logic here to decide. let show = BottomOne; if (this.state.show === BottomOne) { show = BottomTwo; } this.setState({ show }); } render() { return ( <div> <button onClick={this.toggleComponent}>Change</button> <this.state.show /> </div> ); } } ReactDOM.render(<Example />, document.getElementById('root'));
<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="root"></div>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.