时间戳

首页 > 解决方案 > 从不同的组件访问父元素？

reactjs - 从不同的组件访问父元素？

问题描述

我有一个在我的主 app.js 组件中传递的按钮组件，我需要更改按钮的父元素的样式。显然 parentNode 没有遵循反应规则，那么如何以反应方式更改按钮 parentNode 类的样式？有多个“学生容器”。如何显示：仅阻止所选按钮的父元素？

应用程序.js

import Button from "./components/Button";

function App() {

 {student
        .filter(
          (name) =>
            name.firstName.toLowerCase().includes(studentFilter) ||
            name.lastName.toLowerCase().includes(studentFilter)
        )
        .map((students) => {
          

          return (
            <div key={students.id} className="student-container">
              <img alt="students" className="student-img" src={students.pic} />
              <div className="student-column">
                <p className="student-item">
                  {" "}
                  {students.firstName} {students.lastName}
                </p>
              

                <div className="display-score-container">
                  {students.grades.map((test, index) => {
                    return (
                      <p key={index} className="student-score">
                        Test {index + 1}:{" "}
                        <span className="student-percentage">{test}%</span>
                      </p>
                    );
                  })}

                  
                </div>
              </div>

              <Button></Button>
            </div>
          );
        })}
}

按钮.js

export default function Button() {
  const [buttonLabel, setButtonLabel] = useState("+");

  const toggleButtonLabel = (e) => {
    setButtonLabel(buttonLabel === "+" ? "-" : "+");

//e.target.parentNode.style.display = "block"//
   
  };
  return (
    <>
      <button onClick={toggleButtonLabel} className="expand-btn">
        {buttonLabel}
      </button>
    </>
  );
}

标签： reactjsjsx

解决方案

我的想法是将数组映射的返回值包含到 Button 组件中。然后使用三元检查是否选择了特定按钮，将className道具添加到该确切组件。我对 props 使用传播语法。

如果条件为真，则将对象{className: 'student-container'}作为道具传播，如果条件为假，则传播空对象{}，即不添加任何道具。

应用程序.js

import Button from "./components/Button";

function App() {
  return (
  <SomeParentComponents>
    <SomeOtherParentComponents>
      {student
         .filter(
           (name) =>
             name.firstName.toLowerCase().includes(studentFilter) ||
             name.lastName.toLowerCase().includes(studentFilter)
         )
         .map((studentItem) => <Button studentItem={studentItem} />)}
    </SomeOtherParentComponents>
  </SomeParentComponents>
}

按钮.js

export default function Button(props) {
  const {studentItem} = props;
  const [buttonLabel, setButtonLabel] = useState("+");

  const toggleButtonLabel = () => {
    setButtonLabel(buttonLabel === "+" ? "-" : "+");
  };

  return (
    <div key={studentItem.id} ...(buttonLabel === '+' ? {className: 'student-container'} : {})>
      <img alt="students" className="student-img" src={studentItem.pic} />
      <div className="student-column">
        <p className="student-item">
          {` ${studentItem.firstName} ${studentItem.lastName}`}
        </p>
      
        <div className="display-score-container">
          {studentItem.grades.map((test, index) => {
            return (
              <p key={index} className="student-score">
                {`Test ${index + 1}: `}
                <span className="student-percentage">{`${test}%`}</span>
              </p>
            );
          })}
          
        </div>
      </div>

      <button onClick={toggleButtonLabel} className="expand-btn">
        {buttonLabel}
      </button>
    </div>
  );
}

这就是 React Component 的美妙之处，对吧。您可以将多个基本 html 组件添加和组合成个性化组件，并调整其样式或状态。

PS我使用一些个人偏好的代码风格作为例子：

  • 更喜欢使用带反引号的字符串文字和${variableName}
  • 有一些自由重命名变量名（大胆的，有时是冒犯性的举动！），当然你可以根据你的个人喜好或编码风格标准重命名

推荐阅读