Question

我是新来做出反应并在表单元格项目的onClick（）上呈现新组件时遇到一些问题。

class Component extends React.Component{

constructor(props) {
        super(props);
        this.routeChange = this.routeChange.bind(this)
        this.state = {
            values: []
        };
    }
routeChange(id) {
        console.log(id)
        const userAccount = (
            <Account  />
          );
        return userAccount;
    }

render() {
        return (
            <div className="classname1">
                <table>
                    <thead className="table-header">
                        <tr className="table-row">
                            <th>Account Name</th>
                        </tr>
                    </thead>
                    <tbody>
                        {this.state.values.map(value => {
                            return (
                             <tr className="data-table">
                                <td className="txt-blue" onClick={() => this.routeChange(value.id)}>{value.name}</td>
                             </tr>)
                        })}
                    </tbody>
                </table>

            </div>

}

因此，当我执行上述操作时，一切正常，并且表格已正确呈现，但是当我单击表格单元格项时，则未呈现我的组件。但是我可以看到我在routeChange（）中传递的console.log（）。

注意：我的状态值[]不为空，因为在这里，我仅显示代码片段。

Answer 1

您需要将调用for (var i = 0; i < responsiveBreakpointsObj.length; i++) { if (responsiveBreakpointsObj[i].settings.slidesToShow < numOfSlidesToScroll) { responsiveBreakpointsObj[i].settings.slidesToScroll = responsiveBreakpointsObj[i].settings.slidesToShow; } }函数的函数的引用传递给routeChange函数。一种方法是使用箭头功能。

onClick

Answer 2

单击并触发'onClick'事件时，它不会期望返回值，这意味着要返回的组件将无处可寻。

要显示“ Account”组件，您可以做的是在您的状态下保留一个变量，例如showAccount，该变量初始化为false，然后使用“ routeChange”方法将其更改为true。

我不太了解您的用例，但可能是这样的：

class Component extends React.Component{

constructor(props) {
        super(props);
        this.routeChange = this.routeChange.bind(this)
        this.state = {
            values: [],
            accountId: null,
            showAccount: false
        };
    }
routeChange(id) {
        console.log(id)
        /* Commenting this,
          const userAccount = (
            <Account  />
          );
          return userAccount;
        */
        this.setState({showAccount: true, accountId: id})
    }

render() {
        return (
            <div className="classname1">
                <table>
                    <thead className="table-header">
                        <tr className="table-row">
                            <th>Account Name</th>
                        </tr>
                    </thead>
                    <tbody>
                        {this.state.values.map(value => {
                            return (
                             <tr className="data-table">
                                <td className="txt-blue" onClick={() => this.routeChange(value.id)}>{value.name}</td>
                             </tr>)
                        })}
                    </tbody>
                </table>
                {this.state.showAccount && this.state.accountId &&
                  <Account id={this.state.accountId} />
                }
            </div>

}

无论如何，请尝试使用您的组件，看看最适合您的组件。我建议的内容可能对您没有用，所以只需考虑一下概念并将其调整为适合您自己的应用程序即可。

无法在onClick（）上呈现新组件

2 个答案: