将组件作为道具传递并在事件中使用它答案

【问题标题】：Passing component as props and using it in event将组件作为道具传递并在事件中使用它
【发布时间】：2020-09-20 16:08:40
【问题描述】：

我正在创建一个标签样式的导航。而且我已经将标签及其内容作为孩子传递了。如下图

import "./App.css";
import Tabs from "./TranslationPopoverCardComponent/Tabs";

class App extends React.Component {
  render() {
    return (
      <div>
        <Tabs>
          <span label="Gator">
            <button>Butotn here</button>
          </span>
          <span label="Croc">
            After 'while, <em>Crocodile</em>!
          </span>
          <span label="Sarcosuchus">Nothing to see here,</span>
        </Tabs>
      </div>
    );
  }
}

export default App;

标签组件内部。


class Tabs extends Component {
  constructor(props) {
    super(props);
    this.state = {
      //setting default open tab
      activeTab: this.props.children[0],
    };
    this.changeTab = this.changeTab.bind(this);
  }

  changeTab(e) {
    this.setState({ activeTab: e.target.value });
  }

  render() {
    const tabs = this.props.children.map((child) => {
      return (
        <span>
          <button value={child} onClick={this.changeTab}>  // this line here
            {child.props.label}
          </button>
        </span>
      );
    });
    return (
      <div>
        {tabs}
        <br />
        {this.state.activeTab}
      </div>
    );
  }
}

export default Tabs;

默认选项卡并按预期加载，显示一个按钮。然后，当我单击另一个选项卡时，文本不会加载。显示 [object Object] 。我可以不将 props.children 作为组件的 props 传递，然后通过事件将其设置为状态吗？（我做错了什么？）

我已经尝试在那条线上用child.props.children 替换child，但是按钮组件没有呈现并显示[object Object]，其他工作正常。

【问题讨论】：

标签： reactjs react-props

【解决方案1】：

问题在于inputs/buttons 值不存储对象，值始终是一个字符串，这就是为什么您在单击每个选项卡按钮(try console.log(typeof e.target.value)) 时看到[object,object]。

另外你不需要使用 value 你可以直接将 child 传递给这样的函数：

 <button onClick={() => setActive(child)}>

这里是完整的code

【讨论】：

【解决方案2】：

在 onClick 中使用它

 onClick={() => this.changeTab(child)}

并将处理程序修改为

  changeTab(e) {
    this.setState({ activeTab: e });
  }

【讨论】：

【解决方案3】：

您可以在点击标签时简单地传递索引，即

const tabs = this.props.children.map((child,i) => {
      return (
        <span>
          <button value={child} onClick={ () => this.changeTab(i)}> 
            {child.props.label}
          </button>
        </span>
      );
    });

在更改选项卡中执行以下操作：

changeTab = (i) =>  {
    this.setState({ activeTab: this.props.children[i] });
  }

这里是完整的代码：

import React from "react";
import "./styles.css";

class Tabs extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      //setting default open tab
      activeTab: this.props.children[0]
    };
    this.changeTab = this.changeTab.bind(this);
  }

  changeTab = (i) => {
    this.setState({ activeTab: this.props.children[i] });
  };

  render() {
    const tabs = this.props.children.map((child, i) => {
      return (
        <span>
          <button value={child} onClick={() => this.changeTab(i)}>
            {child.props.label}
          </button>
        </span>
      );
    });
    return (
      <div>
        {tabs}
        <br />
        {this.state.activeTab}
      </div>
    );
  }
}

export default function App() {
  return (
    <div className="App">
      <Tabs>
        <span label="Gator">
          <button>Button here</button>
        </span>
        <span label="Croc">
          After 'while, <em>Crocodile</em>!
        </span>
        <span label="Sarcosuchus">Nothing to see here,</span>
      </Tabs>
    </div>
  );
}

这里是演示：https://codesandbox.io/s/cranky-kepler-sr4pz?file=/src/App.js:0-1081

【讨论】：