如何将标题的点击值转移到ReactJs

Question

I有2个组件，一个是Compo1，另一个是Compo2，因此，当我在Compo1上单击DIV标签“ ClickPrint”时，我应该将值将其置于Compo2中。 compo1是类似标头的常见组件，因此它将在每个组件中都存在。我正在遇到此错误（当我单击“ click plickprint” div”时，我会遇到此错误（无法读取未定义的属性（读取'setId'）。这是下面的代码。

compo1.js

import React, { useState, useEffect,props } from 'react';
import { Container } from 'react-bootstrap';

const Compo1 = () => {
    const [posts, setPosts] = useState([]);
    const [id, setId] = useState(null);
    
    const handlePrint = () => {
        const event ="hi"
        console.log(event)
        // your logic and use setId from props.
        // This is just an example.
        props.setId(event.target.value);
     }
    return (
        <React.Fragment>
            <div className="">
                <div onClick={handlePrint}>Clickprint</div>
            </div>
        </React.Fragment>
    )
};
export default Compo1;

compo2.js
--------
    import React, { useState, useEffect } from 'react';
    import { Container } from 'react-bootstrap';
    
    import React, { useState, useEffect } from 'react';
import { Container } from 'react-bootstrap';

const Compo2 = (props) => {
    const [posts, setPosts] = useState([]);
        const id = props.id;
    return (
        <React.Fragment>
            <div className="banner d-flex">
            <compo2 id={id} />
            </div>
        </React.Fragment>
    )
};
export default Comp2;

Answer 1

不确定您要实现的目标，但是由于未定义道具时，您正在调用props.setId，而丢弃了错误。您可能只想致电SetID来更新组件的状态。

也是，如果您尝试从单击事件中获取一些数据，则可以从handerprint事件参数获取它们。

import React, { useState, useEffect,props } from 'react';
import { Container } from 'react-bootstrap';

const Compo1 = () => {
    const [posts, setPosts] = useState([]);
    const [id, setId] = useState(null);
    
    const handlePrint = (event) => {
        console.log(event)
     
         setId(event.target.getAttribute("value"));
     }
    return (
        <React.Fragment>
            <div className="">
                <div onClick={handlePrint} value="someValue">Clickprint</div>
            </div>
        </React.Fragment>
    )
};
export default Compo1;

removeNearbyDuplicateCitations(html: string): string {
    const parser = new DOMParser();
    const doc = parser.parseFromString(html, 'text/html');

    doc.body.childNodes.forEach(node => {
      if (node.nodeType === Node.ELEMENT_NODE) {
        let previousKey = '';

        Array.from(node.childNodes).forEach((child: ChildNode, index, arr) => {
          if (child.nodeType === Node.ELEMENT_NODE && child.nodeName === 'SPAN') {
            const link :any = (child as HTMLElement).querySelector('a');
            if (link) {
              const key = link.href + link.textContent.trim();

              // Remove only if it's the same as the previous one
              if (key === previousKey) {
                node.removeChild(child);
              } else {
                previousKey = key; // Update last seen key
              }
            }
          } else {
            previousKey = ''; // Reset when non-citation content appears
          }
        });
      }
    });

    return doc.body.innerHTML;
  }

Answer 2