我可以从一个组件导出数据以更新父组件的状态吗？

Question

我想将我在此事件中收集的变量“synonym”发送到另一个组件。该组件没有直接链接到这个组件，它实际上是父组件的父组件。

理想情况下，这个词会更新另一个组件的状态，这样我就可以用这个新词再次运行 API。

export default function Synonym(props) {
  function searchSynonym(event) {
    let synonym = event.target.innerHTML;
  }

  if (props.synonyms.length > 0) {
    return (
      <div className="Synonym">
        {props.synonyms.map((word, index) => {
          if (index < 10) {
            return (
              <button
                key={index}
                className="synonym-word"
                onClick={searchSynonym}
              >
                {word}
              </button>
            );
          } else return null;
        })}
      </div>
    );
  } else return null;
}

完整代码已在 GitHub 上开源。我要发送消息的组件是 Search.js

提前谢谢你，我是 React 的新手！

Answer 1

从child组件向parent组件传递数据的过程如下：

在 parent 组件中创建一个回调函数。数据将是使用此回调函数从 child 组件检索。
作为parent组件的prop，将回调函数传递给 child.
使用props，child组件调用parent回调函数和 return 数据到 parent 组件。

你的情况直接简单的解决方案是在要使用“同义词”的搜索组件中创建一个回调函数，然后将该函数作为 prop 传递给定义组件，然后再将其传递给同义词组件。

点赞！

在搜索组件中创建同义词 useState 并创建 getSynonym 回调函数，并将其作为属性传递给定义组件。

export default function Search() {
  const [keyword, setKeyword] = useState("");
  const [result, setResult] = useState(null);
  const [photos, setPhotos] = useState(null);
  const [synonym, setSynonym] = useState(null);
  const getSynonym = (value) =>{
    setSynonym(value)
  }

  {....}

  return (
    <div className="Search">
      <form onSubmit={handleSearch}>
        <input className="input" type="search" onChange={updateCity} />
      </form>
      <Definitions data={result} getSynonym={getSynonym}/>
      <Pictures data={photos} />
    </div>
  );
}

在 Definations 组件中再次将回调函数传递给 Synonym 组件。

 export default function Definitions(props) {
     {...}    
        return (
          {...}
          <Synonym synonyms={meaning.definitions[0].synonyms} getSynonym={props.getSynonym} />
          {...}
        );
    }

在Synonym组件中调用回调函数。

export default function Synonym(props) {
  function searchSynonym(event) {
    let synonym = event.target.innerHTML;
    props.getSynonym(synonym)
  }
{...}
}

我可以从一个组件导出数据以更新父组件的状态吗？

Can I export data from one component to update a state in a Parent of a Parent?

api

components

state

reactjs