Question

你能告诉我吗？如何制作可与道具或这些道具阵列一起使用的React组件。

例如我有这个组件：

import React, { Component } from 'react'

export default class Links extends Component {
    render () {
        return (
            <a
                href={ this.props.link }
            >
                { this.props.name }
            </a>
        )
    }
}

我想在这里使用这个组件：

import React, { Component } from 'react'
import Links from './Links'

export default class Block extends Component {
    render () {
        const social = [{
            name: 'Twitter',
            link: 'https://twitter.com',
        }, {
            name: 'FaceBook',
            link: 'https://fb.com',
        }]
        return (
            <div>
                <div>
                    <Links someword={ social }>
                </div>
                <Links name={ 'Google' } link={ 'https://google.com' }>
            </div>
        )
    }
}

Answer 1

遍历您的社交数组并将每个值映射到您的Links组件，然后将其放入render组件的Block函数中。

＆＃13;

export default class Block extends Component {
    render () {
        const social = [{
            name: 'Twitter',
            link: 'https://twitter.com',
        }, {
            name: 'FaceBook',
            link: 'https://fb.com',
        }]
        
        const linkComps = social.map(e =>
          <Links name={ e.name } link={e.link} key={e.name} />;
        );
        
        return (
            <div>
                <div>
                  { linkComps }
                </div>
                <Links name={ 'Google' } link={ 'https://google.com' }>
            </div>
        )
    }
}

＆＃13;

Answer 2

您可以使用map来迭代array并创建Links组件。由于您的social变量具有const值，因此不是在render方法内定义，而是在文件的开头外部定义它。

像这样写：

 const social = [{
            name: 'Twitter',
            link: 'https://twitter.com',
        }, {
            name: 'FaceBook',
            link: 'https://fb.com',
        }
]

class Block extends React.Component {
    render () {
        return (
            <div>
                <div>
                    {
                      social.map((el,i) => <Links 
                                              key={i} 
                                              name={el.name} 
                                              link={el.link} />)
                    }
                </div>
                <Links name={ 'Google' } link={ 'https://google.com' }/>
            </div>
        )
    }
}

class Links extends React.Component {
    render () {
        return (
            <a
                href={ this.props.link }
            >
                { this.props.name }
            </a>
        )
    }
}

ReactDOM.render(<Block/>, document.getElementById('app'))

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

<div id='app'/>

如果要处理Links组件内部，可以这样写，您可以按名称array传递array或按name and Link传递单个值。< / p>

export default class Links extends Component {

    _renderLinks(){
        if(this.props.array && Array.isArray(this.props.array)){
            return this.props.array.map((el,i) => <a 
                                                     key={i} 
                                                     href={ el.link}
                                                  >  
                                                     {el.name} 
                                                  </a>
        }else{
            return <a href={ this.props.link}> {this.props.name} </a>
        }
    }

    render () {
        return (
            <div>
                {this._renderLinks()}
            </div>
        )
    }
}

Answer 3

从道具数组中渲染多个组件的常用方法是使用map：

render() {
  // ...
  return (
    <div>
      {social.map(props => (
        <Link key={props.link} {...props}/>
      ))}
    </div>
  );
}

也就是说，一般来说，拥有一个带有两种不同道具的组件是一个坏主意。也就是说，一个组件应该采取例如name和link道具或它应该使用具有这些属性的对象数组。它不应该两者兼而有之。

解决问题的一种简洁方法是拥有两个组件：<Link>组件，name和link道具并呈现单个链接，以及<Links> （复数）组件，它接受具有这些属性的对象数组，并为每个属性呈现<Link>（单数）组件。

基本实现如下所示。点击下面的▸⃝运行代码段以查看它的实际效果（请注意，我添加了一些CSS只是为了显示每个组件的边界）。

const Link = ({name, link}) => (
  <a href={link}>{name}</a>
);

const Links = ({links}) => (
  <div>
    {links.map(props => <Link key={props.link} {...props}/>)}
  </div>
);

class Block extends React.Component {
  render() {
    return (
      <div>
        {/* Render an array of links with <Links> */}
        <Links links={this.props.social}/>

        {/* Render a single link with <Link> */}
        <Link name="Google" link="https://google.com"/>
      </div>
    );
  }
}

const social = [
  { name: 'Twitter',
    link: 'https://twitter.com',
  },
  { name: 'Facebook',
    link: 'https://facebook.com',
  }
];

ReactDOM.render(<Block social={social}/>, document.querySelector('div'));

a {display: block;}
div div {border: 1px dotted gray; padding: 5px; margin-bottom: 5px;}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div></div>

React：使用道具或其中的数组

3 个答案: