React Component-当用户单击链接时在div内渲染组件

Question

我在LI中有一个react组件和一个带有2个链接的htlm列表。

我需要其中的组件仅按需呈现。

这是当前代码：

import React from 'react';

import ComponentOne from 'componentone';
import ComponentTwo from 'componenttwo';

const MyComponent = (props) => <div>

    <ul>
        <li id="show-one">
            <a href="#">Show One</a>
        </li>
        <li id="show-two">
            <a href="#">Show Two</a>
        </li>
    </ul>

    <div id="content-wrapper">
        <ComponentOne />
        <ComponentTwo />
    </div>

</div>

export default MyComponent

在内容包装器中，您可以看到两个组件... <ComponentOne />和<ComponentTwo />

我需要做的是让<ComponentOne />在用户单击<li id="show-one"> ...时显示。

并使<ComponentTwo />在用户单击<li id="show-two">

我怎样才能做到这一点？

Answer 1

有很多方法可以做到这一点。 我建议您可能想看看使用路由库， React Router可能是最受欢迎的，非常值得一看。

另外，这里是一个基于基本state的解决方案：

import React from 'react';

import ComponentOne from 'componentone';
import ComponentTwo from 'componenttwo';

class MyComponent extends React.Component {
  constructor(props) {
    super(props);

    state = {
      displayComponent: 'one'  // key defining which component to display
    }
  }

  selectComponent(component) {
    this.setState({
      displayComponent: component  // set the component you want to display
    })
  }

  render() {
    const {displayComponent} = this.state;

    return(
      <div>
        <ul>
          <li id="show-one">
              {/* When clicked, set `displayComponent` to 'one' */}
              <a onClick={() => this.selectComponent('one')}>Show One</a>
          </li>
          <li id="show-two">
            <a onClick={() => this.selectComponent('two')}>Show Two</a>
          </li>
        </ul>

        <div id="content-wrapper">
            {/* only render the component that matches the state */}
            {/* this could easily be a switch() statement as well */}
            {displayComponent === 'one' && <ComponentOne />}
            {displayComponent === 'two' && <ComponentTwo />}
        </div>
      </div>
    );
  }
}

export default MyComponent

Answer 2

使用路由机制解决您的问题。 参考：使用来自“ react-router-dom”的import {BrowserRouter作为路由器，交换机，路由，链接}；

Answer 3

import React, {Component} from 'react';
import ComponentOne from 'componentone';
import ComponentTwo from 'componenttwo';

class MyComponent extends Component  {

  state = {
    show:""
  }      

  render() {

    let content = null;
    if(show === "showOne"){
      content = <ComponentOne />;
    }else if (show === "showTwo"){
      content = <ComponentTwo />;          
    }

    return (
     <div>
        <ul>
         <li id="show-one">
          <button onclick={this.setState({ show: "showOne" })}>Show One</button>
         </li>
         <li id="show-two">
          <button onclick={this.setState({ show: "showTwo" })}>Show Two</button>
         </li>
        </ul>

        {content}
     </div>
    )
  }
}

你明白了。 玩这个。

Answer 4

我对您的问题感到困惑，因此，我将尝试回答这两种情况。 但是在两种情况下，您都需要附加一个状态变量来处理两个组件的显示状态

您可以在- <a onClick={this.showComponentOne}>...</a>的行上执行操作，并且函数调用应类似于

showComponentOne() { this.setState({showComponentOne: !this.state.showComponentOne});}

1. 第一种情况是您需要在<li>标签之外渲染组件。 您可以像this.state.showComponentOne && <ComponentOne />这样将条件附加到content-wrapper 。 对第二个组件重复相同的步骤。
2. 如果需要在<li>级别内联呈现。 您可以执行<a href="#">Show One</a> {this.state.showComponentOne && <ComponentOne />}

Answer 5

尝试这样的事情：
这是在单击li元素时使用您定义的id在元素上渲染元素

const MyComponent = (props) =>( 
  <div>
    <ul>
      <li id="show-one" onClick={ () => ReactDOM.render(<ComponentOne/>,document.getElementById('showhere'));}>
        <a id ="showhere" href="#">Show One</a>
      </li>
      <li id="show-one" onClick={ () => ReactDOM.render(<ComponentTwo/>,document.getElementById('showhere2'));}>            
        <a href="#" id="showhere2">Show Two</a>
      </li>
   </ul>
  <div id="content-wrapper">
    <ComponentOne />
    <ComponentTwo />
  </div>

）