Question

我想在类基础组件中显示我的功能组件，但是它不起作用。我制作了一个基于函数的simpletable组件，它只显示带有一些值的表，但是我想在单击“显示用户”按钮时显示它。

import React ,{Component} from 'react';
import Button from '@material-ui/core/Button';
import SimpleTable from "../userList/result/result";


 class ShowUser extends Component{
     constructor(props) {
         super(props);
         this.userList = this.userList.bind(this);
     }
     userList = () => {
         //console.log('You just clicked a recipe name.');
         <SimpleTable/>
   }

    render() {

         return (
             <div>

                 <Button variant="contained" color="primary" onClick={this.userList} >
                     Show User List
                 </Button>

             </div>
         );
     }


}
export default ShowUser;

Answer 1

如果您引用的是方法userList，则似乎您假设存在一个隐式返回值。因为您使用花括号，所以需要从函数含义中显式返回：

const explicitReturn = () => { 134 };
explicitReturn();  <-- returns undefined

const implicitReturn = () => (134);
implicitReturn(); <-- returns 134

Answer 2

问题在于您尝试显示SimpleTable组件的方式。您正在userList函数中使用它，但这是不正确的。仅在render方法内使用React元素。

您可以做的是使用状态来切换组件的显示。像这样：

const SimpleTable = () => (
  <p>SimpleTable</p>
);

class ShowUser extends React.Component {
  constructor(props) {
    super(props);
    this.state = {showSimpleTable: false};
    this.toggle= this.toggle.bind(this);
  }

  toggle = () => {
    this.setState(prev => ({showSimpleTable: !prev.showSimpleTable}));
  }

  render() {
    return (
      <div>
        <button variant = "contained" color = "primary" onClick={this.toggle}>
          Show User List
        </button>
        {this.state.showSimpleTable && <SimpleTable />}
      </div>
    );
  }
}

ReactDOM.render(<ShowUser />, document.getElementById("app"));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="app"></div>

Answer 3

您要寻找的功能称为Conditional Rendering。 onClick prop函数是一个事件处理程序，react中的事件可用于更改组件的状态。然后可以将该状态用于渲染组件。在普通的javascript或jQuery中，我们调用一个函数并修改actual DOM以操纵UI。但是React使用virtual DOM。您可以按以下方式实现所需的功能：

class ShowUser extends Component {
    constructor(props) {
        super(props)

        // This state will control whether the simple table renders or not
        this.state = {
            showTable: false
        }

        this.userList.bind(this)
    }

    // Now when this function is called it will set the state showTable to true
    // Setting the state in react re-renders the component (calls the render method again)
    userList() {
        this.setState({ showTable: true })
    }

    render() {
        const { showTable } = this.state

        return (
            <div>
                <Button variant="contained" color="primary" onClick={this.userList}>
                    Show User List
                </Button>

                {/* if showTable is true then <SimpleTable /> is rendered if falls nothing is rendered */}
                {showTable && <SimpleTable />}
            </div>
        )
    }
}

Answer 4

为什么您的代码不起作用

必须渲染SimpleTable，因此您需要将其放在render方法中。任何需要在组件内部呈现的内容都必须放在其中
单击时仅包含SimpleTable，应将其用于更改状态变量的值，该状态变量控制是否显示您的组件。您希望它如何工作，而不是呈现表格。

下面是您的代码应如何实现所需的外观：

import React ,{Component} from 'react';
import Button from '@material-ui/core/Button';
import SimpleTable from "../userList/result/result";


class ShowUser extends Component{
 constructor(props) {
     super(props);
     this.state = { showUserList : false }
     this.userList = this.userList.bind(this);
 }
 showUserList = () => {
     this.setState({ showUserList : true });
 }

render() {

     return (
         <div>

             <Button variant="contained" color="primary" onClick={this.showUserList} >
                 Show User List
             </Button>
         {this.state.showUserList ? <SimpleTable/> : null}

         </div>
     );
 }


}
export default ShowUser;

您还可以为其他一些单击添加hideUserList方法。

或者甚至更好的toggleUserList

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

如何使用onClick事件在基于类的组件中调用功能组件？

4 个答案: