Javascript 将数据onClick从子组件传递到React.JS中的另一个子组件

我试图在另一个子组件中渲染选定的li（映射到子组件中）。 因此，您有以下结构（非常简单）：

---

父组件（Parent.JS）

• ➥ 名为Title.JS的第一个子级（该子级应呈现从包含菜单的第二个子级中选择的标题）
• ➥ 第二个子菜单名为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

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

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

import React，{useState}来自“React”
从“./Child”导入子项
从“./菜单”导入标题
函数父函数（）{
const[word，setWord]=useState（'Parent'）；
返回(
setWord（word）}/>
)
}
导出默认父级

Title.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

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

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

从“React”导入React
功能名称（道具）{
返回(
//这里我告诉代码打印“未选择任何内容”
//直到我没有选择菜单中的链接。
{props.title？{props.title}：未选择任何内容}
)
}
导出默认标题

Menu.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

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

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

从“React”导入React
常数数据=[
{标题：“家”}，
{标题：“关于”}，
{标题：“联系人”}，
]
功能菜单（道具）{
返回(
{data.map（（项）=>{
return
props.changeWord（props.children）}>{item.title}
})}
)
}
导出默认菜单

当然，App，JS是简化的

import Parent from './Parent'

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

export default App;

import Parent from./Parent'
函数App（）{
返回(
);
}
导出默认应用程序；

---

我太接近了。

当你调用

changeWord

时，你想传递你映射的

项，而不是
道具。孩子们

因此，您的
菜单应该如下所示

从“React”导入React；
const data=[{title:'Home'}，{title:'About'}，{title:'Contact'}]；
功能菜单（道具）{
返回(
{data.map（（项）=>{
return
props.changeWord（item）}>{item.title}
；
})}
);
}
导出默认菜单

您的
父项
应该像这样将
word.title
状态值传递到
title
中

import React，{useState}来自“React”
从“./Child”导入子项
从“./菜单”导入标题
函数父函数（）{
const[word，setWord]=useState（'Parent'）；
返回(
setWord（word）}/>
)
}
导出默认父级

注意：您应该删除
'Parent'
的初始状态值，因为
word
现在是一个对象，您在尝试访问
word.title
时可能会出错。当您调用
changeWord
时，您希望传递您正在映射的
项目，而不是
道具。children

因此，您的
菜单应该如下所示

从“React”导入React；
const data=[{title:'Home'}，{title:'About'}，{title:'Contact'}]；
功能菜单（道具）{
返回(
{data.map（（项）=>{
return
props.changeWord（item）}>{item.title}
；
})}
);
}
导出默认菜单

您的
父项
应该像这样将
word.title
状态值传递到
title
中

import React，{useState}来自“React”
从“./Child”导入子项
从“./菜单”导入标题
函数父函数（）{
const[word，setWord]=useState（'Parent'）；
返回(
setWord（word）}/>
)
}
导出默认父级

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