如果按钮在不同的组件中，是否可以切换类 onclick答案

【问题标题】：Is it possible to toggle a class onclick if the button is in a different component如果按钮在不同的组件中，是否可以切换类 onclick
【发布时间】：2020-03-06 14:40:36
【问题描述】：

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

filter.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'}) 中

layout.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 并让它更改另一个组件？如果这令人困惑，我可以重新提出问题

【问题讨论】：

听起来Context API 是您所追求的。
如果你在你的 layout.js 组件中使用你的 filter.js 组件是可能的，如果它们不是 child-parent 你需要使用 redux 或 context API
如果他们是父子，你只需要在父子中设置你的toggleClassFunction并将通过道具传递给孩子，然后在孩子的onClick上调用它

标签： javascript reactjs

【解决方案1】：

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

【讨论】：

【解决方案2】：

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

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

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

还将您的组件名称大写为HitItems 或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>
  )
}

【讨论】：