当我有多个子组件时，如何将值从子组件传递给父组件？

Question

我创建了多个组件，它们具有相同的层次结构，在它们内部我也调用其他组件调用，现在我想在我的上创建函数，它将更新我作为道具传递给我的组件的值。我设法将函数作为道具传递，但无法将值从孩子作为参数传递给函数，因此我只能更新特定于该孩子的道具。

应用程序

function App() {

  // eslint-disable-next-line

  const [content, setContent] = useState(images)

  const [count, setCount] = useState(content.votes)

  console.log(count)

  const upVote = (id) => {

    alert('up =>', id)

  }

  const downVote = () => {

    alert('down')

  }

  return (

    <div className="App">

      <div className="grid">

        {content.map((picture, index) => {

          return <Card key={index} picture={picture} teste={[upVote, downVote]}/>

          })

        }

      </div>

    </div>

  )

}

卡片

function Card({ picture, teste }) {

  return (

    <div className="card">

      <div className="container">

        <img

          width="300"

          alt={`id: ${picture.id}`}

          src={picture.src}

          className="image"

        />

        <Options votes={0} originalPost={picture.original_post} teste={teste[0]}/>

      </div>

    </div>

  )

}

Answer 1

我首先将您的状态合并到 App 组件中。保存对每个图片对象的内容数组的投票。将 upvote 和 downvote 函数传递给每个孩子，并通过单击按钮调用它们。我还会根据道具计算样式，而不是使用状态。应用程序function App() {&nbsp; let initialstate = images.map(image => {&nbsp; &nbsp; image.votes = 0;&nbsp; &nbsp; return image;&nbsp; });&nbsp; const [content, setContent] = useState(initialstate);&nbsp; const upVote = index => {&nbsp; &nbsp; setContent(content[index].votes + 1);&nbsp; };&nbsp; const downVote = index => {&nbsp; &nbsp; setContent(content[index].votes - 1);&nbsp; };&nbsp; return (&nbsp; &nbsp; <div className="App">&nbsp; &nbsp; &nbsp; <div className="grid">&nbsp; &nbsp; &nbsp; &nbsp; {content.map((picture, index) => {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; return <Card key={index} picture={picture} index={index} upVote={upVote} downVote={downVote} />;&nbsp; &nbsp; &nbsp; &nbsp; })}&nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; </div>&nbsp; );}卡片function Card({ index, picture, ...props }) {&nbsp; const upVote = () => props.upVote(index);&nbsp; const downVote = () => props.downVote(index);&nbsp; return (&nbsp; &nbsp; <div className="card">&nbsp; &nbsp; &nbsp; <div className="container">&nbsp; &nbsp; &nbsp; &nbsp; <img&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; width="300"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; alt={`id: ${picture.id}`}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; src={picture.src}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; className="image"&nbsp; &nbsp; &nbsp; &nbsp; />&nbsp; &nbsp; &nbsp; &nbsp; <Options votes={picture.votes} originalPost={picture.original_post} upVote={upVote} downVote={downVote}/>&nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; </div>&nbsp; )选项function Options({ votes, originalPost, upVote, downVote }) {&nbsp; let styling = '#696969';&nbsp; if (count > 0) {&nbsp; &nbsp; styling = '#008000';&nbsp; } else if (count < 0) {&nbsp; &nbsp; styling = '#B22222';&nbsp; } else {&nbsp; &nbsp; styling = '#696969';&nbsp; }&nbsp; return (&nbsp; &nbsp; <div>&nbsp; &nbsp; &nbsp; <button title="Down vote" onClick={downVote} className="buttons">&nbsp; &nbsp; &nbsp; &nbsp; -&nbsp; &nbsp; &nbsp; </button>&nbsp; &nbsp; &nbsp; <span title="Vote counter" style={{ color: styling }} className="counter">&nbsp; &nbsp; &nbsp; &nbsp; {votes}&nbsp; &nbsp; &nbsp; </span>&nbsp; &nbsp; &nbsp; <button title="Up vote" onClick={upVote} className="buttons">&nbsp; &nbsp; &nbsp; &nbsp; +&nbsp; &nbsp; &nbsp; </button>&nbsp; &nbsp; &nbsp; <br></br>&nbsp; &nbsp; &nbsp; <a&nbsp; &nbsp; &nbsp; &nbsp; href={originalPost}&nbsp; &nbsp; &nbsp; &nbsp; target="_blank"&nbsp; &nbsp; &nbsp; &nbsp; title="Click to check the original post"&nbsp; &nbsp; &nbsp; &nbsp; rel="noopener noreferrer"&nbsp; &nbsp; &nbsp; &nbsp; className="link"&nbsp; &nbsp; &nbsp; >&nbsp; &nbsp; &nbsp; &nbsp; Original post&nbsp; &nbsp; &nbsp; </a>&nbsp; &nbsp; </div>&nbsp; );}