Question

我正在创建一个标签样式的导航。我作为孩子通过了这些标签及其内容。如下图所示

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将child.props.children替换为{{1}}，但是按钮组件不会呈现并显示[object Object]，其他组件也可以正常工作。

Answer 1

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

另外，您不需要使用值，而是可以直接将child传递给以下函数：

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

完整的code

Answer 2

在onClick中使用它

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

并将处理程序修改为

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

Answer 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

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

3 个答案: