将点击数据从 child 组件传递到 React.JS 中的另一个 child 组件

Question

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

Parent 组件 (Parent.JS)

➥ 第一个 Child 调用 Title.JS（应该呈现从第二个 Child 中选择的标题，其中将包含菜单）
➥ 第二个 Child 称为 Menu.JS（包含菜单）

我在这里尝试做和理解的练习是如何使用 props 在 children 之间传递数据（如果值超过 parent）。

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;

我很亲近..

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 状态值传递给 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.[=22= 时可能会出错]

将点击数据从 child 组件传递到 React.JS 中的另一个 child 组件

Passing data onClick from child component to another child component in React.JS

javascript

children

onclick

reactjs

react-props