Question

我正在尝试遍历json值列表并基于该列表创建卡。我尝试了许多方法，但是在访问组件中的道具时感觉不到东西。

下面是我的JSON

let mockdata = {values : [{name : 'John'}, {name: 'Mike'}, {name : 'Sam'}]};

这是我的app.js的样子。我正在应用程序中导入cardcontainer。

class App extends Component {
  state = {
    items: []
    }
  componentDidMount() {
      fetch(endpoint)
      .then(response => response.json())
      .then(({values : items}) => this.setState({items}))
  }
  render() {
      return (
            <div className="App">
              <header className="App-header">
                <h1 className="App-title">Ping Pong Time Table</h1>
              </header>
              <div className="card-container">
              <CardContainer/>
            </div>
          </div>
          );
  }
}

export default App;

这是我的卡片容器外观

class CardBody extends React.Component {

  render() {
    return (
      <div className="card-body">
        <p className="date">March 20 2015</p>

        <h2>{this.props.title}</h2>
      </div>
    )
  }
}

class Card extends React.Component {
  render() {
    return (
      <article className="card">
        <CardBody title={this.props.value}/>
      </article>
    )
  }
}

class CardContainer extends React.Component {

  render(){
    var info = this.props.items;
    console.log(info);
    var elements = [];
    for(let val in info){
          elements.push(<Card value={ info[name] } />);
        }
        return (
            <div>
            {elements}
            </div>
        );
  }
}

export default CardContainer;

我对此尝试了不同的方法，但是以某种方式在cardcontainer中的console.log（info）给出了不确定的信息。任何帮助或指针，我们将不胜感激。

谢谢

Answer 1

您没有将任何属性传递给CardContainer。要将属性传递给React组件，您可以像这样传递它们：

class App extends Component {
  state = {
    items: []
    }
  componentDidMount() {
      fetch(endpoint)
      .then(response => response.json())
      .then(({values : items}) => this.setState({items}))
  }
  render() {
      return (
            <div className="App">
              <header className="App-header">
                <h1 className="App-title">Ping Pong Time Table</h1>
              </header>
              <div className="card-container">
              <CardContainer items={this.state.items} />
            </div>
          </div>
          );
  }
}

export default App;

您可以传递任意多的属性。这些属性可用于其this.props上的组件。

Answer 2

您已将this.state.items作为道具传递给CardContainer，并在CardContainer中将item.name传递给Card组件

class App extends React.Component {
   constructor() {
       super();
       this.state = {
          items: [{name : 'John'}, {name: 'Mike'}, {name : 'Sam'}]
       }
   }
   render(){
   return (
     <div className="App">
          <header className="App-header">
            <h1 className="App-title">Ping Pong Time Table</h1>
          </header>
          <div className="card-container">
          <CardContainer items = {this.state.items} />
        </div>
      </div>
  );
 }
}

CardContainer

class CardContainer extends React.Component {

   render(){
       var info = this.props.items;
       console.log(info);
       var elements = info.map((item) => (<Card value={item.name} />));
       return (
            <div>
                {elements}
            </div>
       );
   }
 }

工作代码位于https://codesandbox.io/s/woz4v2nxmw

中

无法在React组件中传递道具值

2 个答案: