如何将参数传递给React子函数的绑定函数？

Question

我有一个具有子选项卡和显示的React应用程序。

<App>
    <Nav>
        <Tab1></Tab1>
        <Tab2></Tab2>
        <Tab3></Tab3>
    </Nav>
    <Section>Display Stuff Here</Section>
    <Footer></Footer>
</App>

当我在应用程序中制作选项卡时，我有一个for循环，将这些选项卡追加到Map变量（这是App React Component的子代）中。

for(...) {
    tab = React.createElement(Tab, {changeDisplay: () => {this.handleClick(this.changeDisplay(i)}});
    myMap.set(i, tab);
}

它应该做的是传递从for循环递增的i变量。 我什至做了console.log来确保它是通过1、2、3、4。但是，实际上显示的是最后一个变量：4。

在Tab类中，所有我有权使用的调用道具：

class Tab extends React.Component {
    constructor(props) {
        super(props);
        this.tab = React.Component('div', null);
    }
    render() {
        return this.tab;
    }
    componentDidMount() {
        this.forceUpdate();
    }
    componentWillUpdate(nextProps, nextState) {
        this.tab = React.Component('div', {onClick: nextProps.changeDisplay});
    }
}

changeDisplay的值对于每个Tab应该是唯一的，因此Tab2的值只能为2，Tab3的值只能为3，依此类推。for循环不应将下一个值传递给已创建的任何先前的Tab，因为它们已经并附加到map变量。

关于如何进行这项工作的任何建议？

我可以定制功能：

changeDisplay1() { changeDisplay(1) };
changeDisplay2() { changeDisplay(2) };
changeDisplay3() { changeDisplay{3) };
changeDisplay4() { changeDisplay(4) };

但是，我想以正确的方式做到这一点，而不是进行黑客攻击。

Answer 1

React非常强大，您可以找到多种基于父状态呈现组件列表的方法。 这是我汇集在一起​​的快速版本。

您可以在此处查看工作副本： https : //codesandbox.io/s/zzqLPrjO

说明：

我们创建一个父组件来存储数据，例如可用active tab卡和active tab 。 我们通过根据Library对象上的键创建一个数组来加载可用的选项卡。 （这完全是可选的，但是使添加其他选项卡更加容易）

将选项卡加载到父组件后，我还创建了一个用于设置/更改active tab的函数。 这将向下传递到地图中的选项卡，该选项卡将呈现从“ Library对象拾取的每个选项卡。

在我们的Tab组件中，我们只渲染名称以及钩接到父组件的click事件，这会将active tab更改为已单击的选项卡。 （注意：请注意如何避免在render方法中进行函数绑定，以便在每次渲染组件时都不会创建新函数（这被认为是不好的做法，这就是我避免这样做的原因。）

活动选项卡更改后，我们将对Library进行基本查找，并呈现附加到该索引的组件。

 import React from 'react'; import { render } from 'react-dom'; // *--------------------- // | Tab Component // *--------------------- const activeTab = { background: 'green', } class Tab extends React.Component { change = () => this.props.change(this.props.name) render = () => { const { name: NAME, active: ACTIVE, } = this.props; const isActive = ACTIVE === NAME ? activeTab : null; return <button style={isActive} onClick={this.change}>{this.props.name}</button> } } // *--------------------- // | Mock list of Components // *--------------------- const Home = () => <div>Home</div> const About = () => <div>About</div> // *--------------------- // | Library of Components // *--------------------- const Library = { Home, About } // *--------------------- // | Display Components // *--------------------- const Display = ({screen}) => { const Comp = Library[screen]; return screen === null ? <div>Please select a tab</div> : <Comp/> } // *--------------------- // | Main App // *--------------------- class App extends React.Component { state = { tabs: [], activeTab: null, } componentWillMount() { const tabs = Object.keys(Library); this.setState({ tabs: tabs }); } changeTab = (tab) => { this.setState({ activeTab: tab }); } render() { return ( <div> { this.state.tabs.map((tab,index) => { return <Tab key={index} name={tab} active={this.state.activeTab} change={this.changeTab} /> }) } <Display screen={this.state.activeTab} /> </div> ) } } render(<App />, document.getElementById('root'));