Question

我正在尝试实现一些功能来编辑一些文本。

我有状态中的对象列表。当我生成列表时，我想检查update字段是false还是true。

我知道我应该使用?和:来做出决定，但不确定如何实施。

function AddPerson(props) {
    return(
        <div>
            <input type="text" value= {props.newPerson} onChange = {props.handleUpdate}/>
            <button type="submit" onClick= {props.addNewFriend}> Add New </button>
        </div>
    ) 
}

function Person(props) {
    return (
        props.listOfPeople.map((person, i) => {
            // this doesn't work
            person['update']
            ? null
            : return
            (
                <li key={i} onClick = {(e) => {props.handleEdit(e, person)}}>{person['name']}</li>
            ) 
        })
    )
}

我应该修改什么，如果它返回false，它将返回<li ..>？

function ListPeople(props) {
    return(
        <div>
            <ul>
                <Person listOfPeople = {props.people} handleEdit = {props.edit}/>
            </ul>
        </div>
    )
}

class App extends Component {
    constructor(props) {
        super(props)
        this.state = {
            newPerson: '',
            people: [{name:'Eric', update: false} , {name:'Rick', update:false}, {name:'Yoni', update:false}]
        };

        this.handleUpdate = this.handleUpdate.bind(this)
        this.addNewFriend = this.addNewFriend.bind(this)
        this.handleEdit = this.handleEdit.bind(this)
    }

    handleUpdate(e) {
        this.setState({newPerson: e.target.value})
    }

    addNewFriend(){
        console.log(this.state.newPerson)
        const newFriendList = this.state.people.slice()
        this.setState(
            {
                newPerson: '',
                people: newFriendList.concat({name:this.state.newPerson, update:false})
            }
        )
    }

    handleEdit(e, person) {
        console.log(person)
        return null

    }


    render() {
        return (
            <div>
                <AddPerson handleUpdate = {this.handleUpdate} addNewFriend = {this.addNewFriend} newPerson = {this.state.newPerson} />
                <ListPeople people = {this.state.people} edit={this.handleEdit} />
            </div>
        );
    }
}

export default App;

Answer 1

只需删除退货并将其放在之前。这样做

props.listOfPeople.map((person, i) => {
  return person['update'] ? null : (
    <li key={i} onClick = {(e) => {props.handleEdit(e, person)}}>{person['name']}</li>
  ) 
})

Answer 2

使用.map时返回值HAS。如果什么都没有返回，那么你在数组中得到一个空值。相反，您应首先filter您的数组，然后运行map：

function Person(props) {
    return (
        props.listOfPeople.filter( person => person.update ).map( (person, i) => {
            return <li key={i} onClick = {(e) => {props.handleEdit(e, person)}}>{person['name']}</li>
        })
    )
}

编辑：

根据<li>呈现<input>或person.update：

function Person(props) {
    return (
        props.listOfPeople.map( (person, i) => {
            if(person.update) {
                return <li key={i}><input /></li>
            }else {
                return <li key={i} onClick={ e => props.handleEdit(e, person) }>{person.name}</li>
            }
        })
    )
}

编辑2：

Foreach循环：

function Person(props) {
    let people = [];
    props.listOfPeople.forEach( (person, i) => {
        if(person.update) {
            people.push(<li key={i}><input /></li>);
        }else {
            people.push(<li key={i} onClick={ e => props.handleEdit(e, person) }>{person.name}</li>);
        }
    });
    return people;
}

Answer 3

我在决定是否渲染组件时在React中使用的一个聪明的技巧是利用短路评估 - ＆gt;

props.listOfPeople.map((person, i) =>
  !person['update'] &&
  <li key={i} onClick = {(e) => {props.handleEdit(e, person)}}>{person['name']}</li>
);

反应：使用？并且：做出决定

3 个答案: