Question

我有以下项目：

我当前正在添加“评论”功能，但是我不知道如何将列表项的名称传递给“评论”组件标题？

这是我的项目的链接：

https://codesandbox.io/s/github/Leocete/React_test-project

我的主要App.js文件：

import React, { Component } from 'react';
import './App.css';
import Header from './components/header'
import ListInput from './components/listInput'
import ListItem from './components/listItem'
import SideBar from './components/sideBar'
import CommentsSection from './components/commentsSection'

class App extends Component {
  constructor(props){
    super(props);

    this.state = {
      itemList: [
        {id:0, text: 'First item'},
        {id:1, text: 'Second item'},
        {id:2, text: 'Third item'},
      ],
      nextId: 3
    }

    this.addItem = this.addItem.bind(this);
    this.removeItem = this.removeItem.bind(this);
  }
  // Add new item to the list
  addItem(inputText) {
    let itemList = this.state.itemList.slice();
    itemList.push({id: this.state.nextId, text: inputText});

    this.setState(nextId => ({
      itemList: itemList,
      nextId: (this.state.nextId + 1)
    }))
    /*this.setState({
      itemList: itemList,
      nextId: ++this.state.nextId
    })*/
  }
  // Remove the item from the list: check if the clicked button id is match 
  removeItem(id) {
    this.setState({
      itemList: this.state.itemList.filter((item, index) => item.id !== id)
    })
  }
  render() {
    return (
      <div className='App'>
        <SideBar />
        <div className='flex-container'>
          <div className='list-wrapper'>
            <Header />
            <ListInput inputText='' addItem={this.addItem}/>
            <ul>
              {
                this.state.itemList.map((item) => {
                  return <ListItem item={item} key={item.id} id={item.id} removeItem={this.removeItem} />
                })
              }
            </ul>
          </div>
          <CommentsSection />
        </div>  
      </div>
    );
  }
}

export default App;

如果可以在Skype上向我解释问题，请加我-shvets.email1@gmail.com

Answer 1

您的header.js文件，

import React from 'react';

export default class Header extends React.Component {
    render() {
      return (
        <h1>{this.props.headerName}</h1>
      )
    }
  }

当您需要在App.js中使用Header时，可以这样使用

<Header headerName={"whatYouWant"}/>

如何将列表项的名称传递给另一个组件？

1 个答案: