Question

如何在点击时渲染导入的React组件？

我有类似的例子：

import UserView from 'views/info'

然后是一个链接

<a onClick={(e) => <UserView user={user} />}}>show user</a>

View组件以这种方式导出;

export default function UserView (props) {
    //...
}

我怎样才能做到这一点？

Answer 1

onClick设置状态，然后在conditional ba sis

上呈现组件

<a onClick={(e) => this.setState({showUserState: true}) />}}>show user</a>

{this.state.showUserState? <UserView user={user} /> : null}

Answer 2

你需要使用react-navigation。 React Navigation

然后你可以使用：

const appNavigator = StackNavigator({
    UserView: {screen: UserView},
}, {
    initialRouteName: 'UserView',
    headerMode: 'none'
});

AppRegistry.registerComponent('blueprint', () => appNavigator);

你的链接将是：

<button onPress={() => this.props.navigation.navigate('UserView')} title="Go to User View"/>

Answer 3

如果您不是在谈论路由，那么您可以这样做：

class App extends React.Component {

    constructor() {
    super();
    this.state = { shouldShow: false };
  }

  onClick() {
    this.setState({ shouldShow: !this.state.shouldShow });
  }

    render() {
    return (
        <div>
          {
          this.state.shouldShow ?
          <h1 onClick={this.onClick.bind(this)}>hello world</h1> : <h1 onClick={this.onClick.bind(this)}>hi girl</h1>
        }
        </div>
    );
  }
}

ReactDOM.render(<App />, document.getElementById('root'));

这是demo

Answer 4

1）使用构造函数设置初始状态 2）通过onClick函数更新状态 3）状态变化反映了组件行为

constructor(props){
  super(props);
  this.state={
  somestate:false
 };
}
render(){
 return(){
  .....
  <a href="#" onClick={()=>this.setState({somestate:true})}></a>
  .....
 <yourcomponent val={this.state.somestate}/>
 }
}

检查状态，然后为自定义组件提供行为。

ReactJS如何打开导入的组件onClick

4 个答案: