将一段数据从子组件传递到父组件是否是反应中的反模式？

Question

考虑以下示例...我有一个名为 ChemVisualisation.jsx 的组件，如下所示const ChemVisualization = props => { const { getChemists, chemists } = props; useEffect(() => {    getChemists();  }, [getChemists]);// useState hook is used here // handleChange sets the name property// i check for chemists based on name property here and pass it as props to // SearchableDropdown component where it renders the list  const getChemistId = id => {    console.log(id);    // showing undefined  };return( <SearchableDropdown            getName={ChemistAnalytics}            onChange={e => handleChange(e)}            name="name"            value={name}            onSubmit={e => handleSubmit(e)}            entities={result}            handleClick={getChemistId}          />);}SearchableDropdown.jsxconst SearchableDropdown = props => {// destructure props herereturn(<div className="control has-icons-left w-3/5 ">        <input          type="text"          placeholder="search"          value={value}          name={name}          onChange={onChange}          className="input"          autoComplete="off"        />        <span className="icon is-left">          <FontAwesomeIcon icon={faSearch}></FontAwesomeIcon>        </span>      </div>      {entities && (        <div className="dropdown">          <div className="dropdown-content">            {entities.map(r => (              <div                className="dropdown-item text-xl hover:bg-gray-400 w-full"                key={r._id}                onClick={r => handleClick(r._id)}              >                {r.chem_name}              </div>            ))}          </div>        </div>      )});}当我单击下拉项时，我没有在其父组件中获取 id。我的问题是如何获取我点击的下拉项目的 id？将数据从子组件传递到其父组件是一种反模式吗？

Answer 1

子组件调用其父组件为响应事件而提供给它们的函数是正常的。然后，父级将根据需要使用新信息重新呈现。这使状态信息保持相当“高”。更多内容在文档中的Lifting State Up中。

在你的例子中

<div className="dropdown-content">

  {entities.map(r => (

    <div

      className="dropdown-item text-xl hover:bg-gray-400 w-full"

      key={r._id}

      onClick={r => handleClick(r._id)}

    >

      {r.chem_name}

    </div>

  ))}

</div>

问题是你正在用不同的（回调的参数）遮蔽r（回调的参数）。调用点击处理程序的第一个参数是一个事件对象。如果您不想要它，请不要接受该参数：mapronClick

<div className="dropdown-content">

  {entities.map(r => (

    <div

      className="dropdown-item text-xl hover:bg-gray-400 w-full"

      key={r._id}

      onClick={() => handleClick(r._id)}

    >

      {r.chem_name}

    </div>

  ))}

</div>

唯一的变化是用rin()替换onClick={() => handleClick(r._id)}。

Answer 2

onClick={e => handleClick(r._id)}

使用 e 而不是 r。