0

我有两个组件，想要切换一个类。但是，我要切换的类在另一个组件中，它根本不起作用。

过滤器.js：

import React, { useState } from 'react';

const filterNav = (props) => {
  const [gridOne, gridTwo] = useState(false);
  const toggleClass = () => gridTwo(!gridOne);

  return (   
    <div>   
      <a onClick={toggleClass}>
        <span className={gridOne ? 'fa fa-icon fa-th-large' : 'fa fa-icon fa-th-list'}></span>
      </a>

      <div className={gridOne ? 'block' : 'hide'}>Test</div>
    </div>
  );
}

export default filterNav;

上面的例子完美地工作（我使用测试 div 来显示它在同一个文件中工作）。我遇到的问题是我要用于切换的按钮在其中filter.js，而我要切换的类在layout.js( className={gridOne ? 'col-md-6 d-flex align-items-stretch' : 'col-md-12'})

布局.js：

import React, { useState } from 'react';

function hitItems(props) {

  const [gridOne, gridTwo] = useState(false);
  const toggleClass = () => gridTwo(!gridOne);

  console.log(props)
  return (
    <div className={gridOne ? 'col-md-6 d-flex align-items-stretch' : 'col-md-12'}>
      <div className="card">
        <div className="card-body">
          {props.topics &&
            <div className="tags-inner">
              {props.topics.map(topic => (
                <div className="card-tag">
                  <span className="home-link track-click">{topic.name}</span>
                </div>
              ))}
            </div>
          }
        </div>
      </div>
    </div>
  )
}

export default hitItems

是否可以在一个组件中切换按钮 onclick 并让它更改另一个？如果这令人困惑，我可以重新处理这个问题

4

2 回答 2

0

问题是filter.js和layout.js之间没有联系，所以你无法知道layout.js中filter.js的状态。你能检查一下组件之间的指南道具和状态吗？

于 2020-03-06T14:47:06.170 回答
0

hitItems如果它依赖于 的状态，则不需要自己filterNav的状态。

可能会出现混淆，因为useState不共享每个组件中的状态。
仅仅因为您将状态命名为相同，并不意味着它们是相同的状态。

您可以将filterNav.gridOnetohitItems作为道具传递并使用它。

并且还将您的组件名称大写为HitItemsor FilterNav。
当您的组件作为默认值导出时，它可能会起作用。
React 需要带有大写字母的组件。

const FilterNav = props => {
  const [gridOne, gridTwo] = useState(false);
  const toggleClass = () => gridTwo(!gridOne);

  return (
    <div>
      <a onClick={toggleClass}>
        <span
          className={
            gridOne ? "fa fa-icon fa-th-large" : "fa fa-icon fa-th-list"
          }
        ></span>
      </a>

      {/* <div className={gridOne ? "block" : "hide"}>Test</div> */}
      {/* Pass the prop to HitItems */}
      {gridOne && <HitItems gridOne={gridOne} />}

    </div>
  );
};

HitItems只会使用传递的道具而不管理自己的状态。

function hitItems({topics, gridOne}) {
  return (
    <div className={gridOne ? 'col-md-6 d-flex align-items-stretch' : 'col-md-12'}>
      <div className="card">
        <div className="card-body">
          {topics &&
            <div className="tags-inner">
              {topics.map(topic => (
                <div className="card-tag">
                  <span className="home-link track-click">{topic.name}</span>
                </div>
              ))}
            </div>
          }
        </div>
      </div>
    </div>
  )
}
于 2020-03-06T14:50:44.813 回答