Question

我希望我的代码切换一个人处理程序，在它工作之前但由于我分成了组件，它似乎已经破坏了。

点击按钮时发生切换（参见里面的返回语句＆lt;

button className={btnClass}
      onClick={props.toggler}>Button</button>

这是我的整个cockpit.js文件（在src / components / cockpit / cockpit.js 中）。

import React from 'react';
import classes from './cockpit.css';

const Ccockpit = (props) => {
  const assignedClasses = [];
  let btnClass = ''
  if (props.cocPersonState) {
      btnClass = classes.red;
      console.log(".......")
  }

  if (props.cocperson <= 2) {
    assignedClasses.push(classes.red)
  }
  if (props.cocperson <= 1) {
    assignedClasses.push(classes.bold)
  }
  return(
    <div className={classes.cockpit}>
      <h1> Hi I am react App</h1>
      <p className={assignedClasses.join(' ')}>hey </p>
      <button className={btnClass}
      onClick={props.toggler}>Button</button>
    </div>
  );
}

export default Ccockpit;

和App.js内部

 return (
      <div className={classes.App}>
      <Ccockpit>
          cocPersonState = {this.state.showPerson}
          cocperson = {this.state.person.length}
          toggler = {this.togglerPersonHandler}
        </Ccockpit>
            {person}
      </div>
     )
   }
}

这是我的 togglerpersonHandler 代码。

togglerPersonHandler = () => {
  const doesShow = this.state.showPerson;
  this.setState({
    showPerson: !doesShow
  });
}

我无法弄清楚为什么它不会切换和console.log /将颜色更改为红色（它不会改变状态）。有人可以查看并找出错误吗？

Answer 1

你的JSX仍然不对。请查看关于为其提供props / children的JSX语法。

你有这个：

<Ccockpit>
    cocPersonState = {this.state.showPerson}
    cocperson = {this.state.person.length}
    toggler = {this.togglerPersonHandler}
</Ccockpit>

但这些价值观不是儿童，而是他们的财产。所以他们需要在开头标记中，如下所示：

<Ccockpit
    cocPersonState = {this.state.showPerson}
    cocperson = {this.state.person.length}
    toggler = {this.togglerPersonHandler}/>

重温一些React教程，了解JSX应该如何构建以及它是如何工作的。

React：意外行为

1 个答案: