在 React.JS 中将数据 onClick 从子组件传递到另一个子组件答案

【问题标题】：Passing data onClick from child component to another child component in React.JS在 React.JS 中将数据 onClick 从子组件传递到另一个子组件
【发布时间】：2021-07-23 07:42:26
【问题描述】：

我正在尝试在另一个子组件中呈现选定的 li（映射在子组件中）。所以你有以下结构（非常简单）：

父组件（Parent.JS）

➥ First Child 称为 Title.JS（应该呈现从 Second Child 中选择的标题，其中将包含菜单）
➥ Second Child 称为 Menu.JS（其中包含菜单）

我在这里尝试做和理解的练习是如何使用道具在孩子之间传递数据（如果值通过父级）。

Parent.JS

import React, { useState } from 'react'
import Child from './Child'
import Title from './Menu'


function Parent() {
    const [word, setWord] = useState('Parent');

    return (
        <div>
            <Title />
            <Menu changeWord={word => setWord(word)}/>
        </div>
    )
}

export default Parent

Title.JS

import React from 'react'

function Title(props) {
    return (
        <div>
           //Here I tell the code to print "Nothing selected" 
           //until I don't choose a link in the menu. 
           {props.title ? <h1>{props.title}</h1> : <h1>Nothing selected</h1>}
        </div>
    )
}

export default Title

Menu.JS

import React from 'react'

const data = [
    {title: "Home"},
    {title: "About"},
    {title: "Contact"},
]

function Menu(props) {
    return (
        <div>
            {data.map((item) => {
                return <li onClick={() => props.changeWord(props.children)}>{item.title}</li>
            })}
        </div>
    )
}

export default Menu

当然，App,JS是简化的。

import Parent from './Parent'

function App() {
  return (
    <div>
      <Parent />
    </div>
  );
}

export default App;

我很接近..

【问题讨论】：

标签： javascript reactjs onclick react-props children

【解决方案1】：

当您调用changeWord 时，您希望传递您正在映射的item，而不是props.children

所以你的Menu 应该是这样的

import React from 'react';

const data = [{ title: 'Home' }, { title: 'About' }, { title: 'Contact' }];

function Menu(props) {
  return (
    <div>
      {data.map((item) => {
        return <li onClick={() => props.changeWord(item)}>{item.title}</li>;
      })}
    </div>
  );
}
export default Menu

您的Parent 应该像这样将word.title 状态值传递给Title

import React, { useState } from 'react'
import Child from './Child'
import Title from './Menu'


function Parent() {
    const [word, setWord] = useState('Parent');

    return (
        <div>
            <Title title={word.title}/>
            <Menu changeWord={word => setWord(word)}/>
        </div>
    )
}

export default Parent

注意：您应该删除'Parent' 的初始状态值，因为word 现在是一个对象，您在尝试访问word.title 时可能会遇到错误。

【讨论】：