Reactjs 选择后隐藏或最小化搜索镶嵌面组件

我们正在构建一个反应式搜索解决方案，并要求在做出选择后隐藏或最小化一个方面（在本例中）

我已经使用自定义渲染函数尝试了以下方法，在该函数中，我可以检查是否已选择值并应用条件渲染：

    render: ({
        loading,
        error,
        data,
        handleChange,
        value
    }) => {
        if (value !== "") {
            return (
                <span>{value}</span>
            )
        }
        else {
            return (
                <ul>
                    {
                        data.map(item => (
                            <li>
                                <input
                                    type="radio"
                                    value={item.key}
                                    onChange={handleChange}
                                />
                                <span>
                                    <span>{item.key}</span>
                                    <span>{item.doc_count}</span>
                                </span>
                            </li>
                        ))
                    }
                </ul>
            )
        }
    }

渲染：({
加载，
错误，
数据，
handleChange，
价值
}) => {
如果（值！==“”）{
返回(
{value}
)
}
否则{
返回(

{
data.map（项=>(

{item.key}
{item.doc_count}

))
}

)
}
}

---

虽然这是可行的，但我想知道是否有一种更干净的方法，可以避免列表的自定义呈现。基本上，在没有面选择的情况下使用默认渲染的解决方案。

我认为这是我认为最有效的方法。以下是我可能采取的其他方法：

• 使用状态变量

创建状态变量，并在选择值时更新状态。您可以使用

onValueChange

执行此操作。每当此状态更改时，可以为singlelist设置display none

handleUpdate = (value) => {
  this.setState({
    value,
  })
}

render(){
  const { value } = this.state;

  return (
    <div>
      <SingleList onValueChange={this.handleUpdate} dataField={} style={value ? { display: 'none' } : { display: 'block'}} />
      {value ? <span>{value}</span> : null}
    </div>
  );
}

handleUpdate=（值）=>{
这是我的国家({
价值
})
}
render（）{
const{value}=this.state；
返回(
{value？{value}:null}
);
}

这是你可以遵循的另一种方式。但是自定义渲染方法是解决此问题的最佳方法

---

希望这有帮助

谢谢你的帮助@yash joshi。您建议的替代解决方案在其他场景中也很方便，我无法让它工作，但可能与我们已经使用的服务器端呈现有关-返回“无法读取null的属性'value'”