Question

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

我需要其中的组件才能按需渲染。

这是当前代码：

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”导入{BrowserRouter作为路由器，交换机，路由，链接}；

Answer 3

bRepository.remove(objectA.getB());

您明白了。玩这个。

Answer 4

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

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

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

第一种情况是需要在<li>标签之外呈现组件。您可以像content-wrapper一样将条件附加到this.state.showComponentOne && <ComponentOne />。对第二个组件重复相同的操作。
如果您需要在<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>

）

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

5 个答案: