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

Question

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

---

父组件 (Parent.JS)

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

---

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

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

标题.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

菜单.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;

我好近啊。。

Answer 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 state 值传递到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'的初始 state 值，因为word现在是 object 并且在尝试访问word.title时可能会出错。