Question

我正在尝试在另一个子组件中呈现选定的 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;

我很接近..

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 时可能会出错。

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

1 个答案: