在React中显示机器人和屏幕阅读器的初始元素。

Question

考虑到可访问性和爬虫的问题，比如说我有一个动态组件，每秒钟更新一次。

<LiveComponent />

输出。

<div id="live">
  <!-- Something that changes very frequently -->
</div>

然而，如果有人有屏幕阅读器，或者有机器人抓取它，不断更新的组件就不会有什么帮助。我宁愿在那第一个油漆上显示一些类似快照、摘要或替代信息的东西，机器人会抓取，读屏器会处理，但用户看不到。(最好不要有一闪而过的刷新。)。

<div id="live">
  <p>This is a static version of the dynamic data that's just as informative</p>
</div>

可能的选择：

• useEffect(()=>{ }, []); 绑定到一个显示类... 但用CSS隐藏显示元素会让事情变得混乱（这两部分信息都会被机器人读者看到）。
• 条件渲染：不会工作（我想），因为我需要这个是客户端......

Answer 1

我将使用不同的 <div class="accessibility-live"> 并将动态数据的静态版本放在那里。您可以使用CSS。绝对离屏定位，类似的东西。

.accessibility-live {
position: absolute;
left: -9999em;
}

这样内容就会成为DOM的一部分 并被辅助技术和爬虫检测到。

然后你可以为你的#live div使用aria-hidden。<div aria-hidden="true" id="live" >

在这里你可以阅读更多关于咏叹调隐藏属性的内容。

Answer 2

当我想显示和隐藏另一个数据后面的UI时，我将使用State来处理变化的状态。

Ex.Est[data, setData]=useState({isShow: true})'; '; '。

const [data, setData] = useState({isShow: true})'。

<div>
{
   (data.isShow)? <p>show your content here</p> : ""
}
</div>

这将隐藏和显示内容，当数据在 使用国家 变化

Answer 3

如果我没说错的话，补充到@AleDP，你可以回顾一下。React-Accessibility 我相信这一半的工作，你需要在减速机内完成。

在减速器中，你需要同时返回当前值和快照值。

// your reducer here
const main = (state = initialState, action) => {
  switch (action.type) {
    case API_CALL_SUCCESS:

      let snapshot= youfunctionhere(action.payload.data)

      return { ...state,   snapshot_info:snapshot,live_info:action.payload.data  };
    default:
      return state;

  }
}

/ 在您的渲染中

<p>
  this.props.snaphot_info <span aria-hidden="true">this.props.live_info</span>!
</p>